Conflict between @nuxt/test-utils jest preset and @vue/test-utils

[sppmstar]

Hi,

I was trying to integrate @nuxt/test-utils in my Nuxt application in order to test pages. I already have a bunch of tests written for the components that use @vue/test-utils.

After following the documentation and adding the @nuxt/test-utils preset to my jest configuration, all my components tests started failing with the same error:

[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.

Any idea how to solve this and be able to use both tools within the same project ?

Thanks!

[mrazauskas]

@vue/test-utils uses Jest’s browser-like environment, but @nuxt/test-utils requires node-like environment to run tests. By adding the preset to jest.config you have set testEnvironment options to 'node' instead of default 'jsdom'.

To solve the problem you could create separate jest.config files for each environment: jest.config.ts for Vue components and jest.config.e2e.ts for Nuxt. If components tests are located in test/unit and end-to-end tests are found inside test/e2e folder you can run them using following package.json scripts:

"scripts": {
  "test": "yarn test:unit && yarn test:e2e",
  "test:e2e": "jest test/e2e -c jest.config.e2e.ts",
  "test:unit": "jest test/unit"
  }

Usually end-to-end tests are slow. Running them separately also helps to keep your unit tests performant.

[sppmstar]

thanks @mrazauskas ! I will try this suggestion