vue-test-utils: Window is undefined, vue-test-utils needs to be run in a browser environment.

if you updated jest to v27 and start seeing this problem, then it’s most likely because jest v27 flipped the default test environment.

https://jestjs.io/ja/blog/2021/05/25/jest-27#flipping-defaults

So you need to add

"testEnvironment": "jsdom"

to jest.config.js to change back to the previous behavior.

since you hadn’t added jsdom to your test setup, it’s a pretty safe bet you didn’t read the docs, which is the least you should do before creating an issue on the github repo.

https://vue-test-utils.vuejs.org/guides/#getting-started

I’m also seeing

[vue-test-utils]: window is undefined, vue-test-utils needs to be run in a browser environment. 
    You can run the tests in node using jsdom 
    See https://vue-test-utils.vuejs.org/guides/#browser-environment for more details.

When trying to setup unit tests with my vue app. Unfortunately https://vue-test-utils.vuejs.org/guides/#browser-environment just leads to https://vue-test-utils.vuejs.org/guides/#getting-started and doesn’t provide any helpful info on configuring vue-test-utils.

It’s unclear if I need to add jsdom, or if it should just work with jest and vue-test-utils. I’ve likely misconfigured something.

@M3psipax - I did read the docs. Here is a quote:

The Jest test runner sets up JSDOM automatically. For other test runners, you can manually set up JSDOM for the tests using jsdom-global in the entry for your tests

So I did see JSDOM is setup automatically and my tests did in fact run without adding JSDOM previously. For some reason my tests stopped working which is why I ended up posting an issue.

If JSDOM really is required by default then the docs need to be updated.

Oh my bad. Sorry. I use mocha, so I had to do this anyway.

In that case, you’re justified and the docs at best seem to be not entirely clear about that.

if you updated jest to v27 and start seeing this problem, then it’s most likely because jest v27 flipped the default test environment.

https://jestjs.io/ja/blog/2021/05/25/jest-27#flipping-defaults

So you need to add

"testEnvironment": "jsdom"

to jest.config.js to change back to the previous behavior.

Damm god thx a lot

I solved it with: jest.config.js add this line setupFilesAfterEnv: ['<rootDir>jest.setup.js'], jest.setup.js require('jsdom-global')()

which is okay for now but feels like a bad solution in general.

Anyone getting the following error after the suggestions above?

    TypeError: Cannot read properties of undefined (reading 'testEnvironmentOptions')

      at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:72:28)
      at async TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at async runJest (node_modules/@jest/core/build/runJest.js:404:19)

My jest config looks like this:

"jest": {
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/$1",
      "^~/(.*)$": "<rootDir>/$1",
      "^vue$": "vue/dist/vue.common.js"
    },
    "testEnvironment": "jsdom",
    "testEnvironmentOptions": {
      "browsers": [
        "chrome",
        "firefox",
        "safari"
      ]
    },
    "moduleFileExtensions": [
      "vue",
      "js",
      "json"
    ],
    "transformIgnorePatterns": [
      "/node_modules/(?!crypto-random-string)"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "<rootDir>/src/**/*.vue",
      "<rootDir>/src/**/*.js"
    ]
  }

The full code in question is

function warnIfNoWindow () {
  if (typeof window === 'undefined') {
    throwError(
      "window is undefined, vue-test-utils needs to be " +
      "run in a browser environment. \n" +
      "You can run the tests in node using jsdom \n" +
      "See https://vue-test-utils.vuejs.org/guides/common-tips.html " +
      "for more details."
    );
  }
}

That seems pretty self-explanatory - my only suggestion would be to link to https://vue-test-utils.vuejs.org/guides/#browser-environment instead of https://vue-test-utils.vuejs.org/guides/common-tips.html.

As a non-jest user, I’m curious why

verbose: true,
testURL: "http://localhost/"

were necessary. Are those a code bug, a documentation bug, or a quirk of your setup?

Yes currently Vue Test Utils needs to run in a DOM environment. There is a section on it in the docs, and the error message is intended to be descriptive.

I’m open to suggestions for how to improve the docs/ error message.

Well, it seems you don’t have a browser environment for your tests…

npm i --save-dev jsdom-global

add the following line in /test/unit/setup:

require(‘jsdom-global’)

if you updated jest to v27 and start seeing this problem, then it’s most likely because jest v27 flipped the default test environment.

https://jestjs.io/ja/blog/2021/05/25/jest-27#flipping-defaults

So you need to add

"testEnvironment": "jsdom"

to jest.config.js to change back to the previous behavior.

It works thanks.

Just remembering that I need also to run npm i --save-dev jest-environment-jsdom.

😄