Bug: ReferenceError: Vue is not defined for v2.0.0

[pdsuwwz]

Describe the bug

In the latest version (v2.0.0), the introduction of @vue/test-utils will result in an error.

Minimal reproduction: https://github.com/pdsuwwz/vue-unit/pull/17/files

Related action: https://github.com/pdsuwwz/vue-unit/runs/6535330150?check_suite_focus=true

To Reproduce

Upgrade the version of @vue/test-utils from v2.0.0-rc.21 to v2.0.0
https://www.npmjs.com/package/@vue/test-utils/v/2.0.0

Expected behavior

Unit test passed.

Related information:

• @vue/test-utils version: v2.0.0
• Vue version: v3.2.35
• node version: v14.19.2
• npm (or yarn) version: v6.14.17

Additional context

[wxsms]

same issue here

[freakzlike]

Maybe this solution will help #234 (comment)

[freakzlike]

Now I faced the same issue in some of my projects which are using jest v28 with jsdom.
The solution from #234 (comment) worked for me

  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    customExportConditions: [
      'node',
      'node-addons'
    ]
  },

When I manually remove the changes of #1484 from the package.json then it is working without testEnvironmentOptions. I'm not sure what is actually the correct way to fix this.

[pdsuwwz]

  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    customExportConditions: [
      'node',
      'node-addons'
    ]
  },

@freakzlike Thank you! I tried it and found it works. I think this can be used as a temporary solution :)

[lmiller1990]

Is this a bug in test utils? Sounds like it's more related to Jest 28 and Vue Jest?

[stephan-roolvink]

The fix suggested by @pdsuwwz works 👍

[lmiller1990]

This sounds like it is Jest/jsdom, and nothing something in Test Utils... going to close this, unless there's an obvious way to improve things on this end.

[sheremet-va]

I think the issue might be on our end. Jest by default uses browser field in exports. Do we need it? Or is it just for unpkg?

[lmiller1990]

Just normally runs in a Node.js environment (using CommonJS modules) so it should be using the require field. I am not sure why it's using the browser field, that's definitely incorrect, but I do not think this is an issue in Test Utils - we specify for require to use the cjs build:

https://github.com/vuejs/test-utils/blob/main/package.json#L14-L15

I don't think browser is an official one, it's not documented: https://nodejs.org/api/packages.html#subpath-exports. I think it's just a kind of pseudo standard, implemented by various tools. I'm not sure why it's getting consumed in your project, would need more information.

[sheremet-va]

It uses browser field, because jest resolves to it for jsdom (since v28?)

https://jestjs.io/docs/next/configuration#testenvironmentoptions-object

[lmiller1990]

Oh, I see. I do not think we can do anything about this here, though. Seems #1525 (comment) is the solution for now.

[RaphaelDDL]

A bit late to the party but just wanted to double check something regarding #1525 (comment) "fix", as I'm upgrading a codebase from jest26->29, using test-utils.

I have testEnvironment: 'jsdom', and without customExportConditions or with it set as browser, tests fails with ReferenceError: Vue is not defined. Expected as per the discussion. So, changing to suggested node and node-addons does work and tests run. But then, all window.something fails pointing to " use jsdom"

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

    ReferenceError: window is not defined

I have jest@29, jest-environment-jsdom installed, and I have all expected configs (.vue transform to @vue/vue3-jest; .js transform to babel-jest).

What am I missing to make jsdom features (aka browser window and other implementations) work in test-utils tests?