DEV Community

Add testing to Vite

Gábor Soós on February 23, 2021

Vite is the brand new development server created by Evan You. It's framework agnostic and incredibly fast thanks to native ES Modules instead of bu...

Read full post

Sœtz - Simon Lecutiez • Apr 11 '21 • Edited

Hey! Thanks a load for this, but it seems it doesn’t work for me… The error I got says Cannot find module './xxx.vue' or its corresponding type declarations.. I tried searching for ways to fix this but couldn’t understand what’s wrong. :( It’s such a shame because Vite was a nice experience until then.

webmapLee • Jan 30 '22

just use vue-jest@next don't use vue-jest/next or vue3-jest ，it's a issues of Version compatibility， then config in jest.config.js as follow:

module.exports = {
moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
transform: {
'^.+\.ts$': 'ts-jest',
'^.+\.vue$': '@vue/vue3-jest',
},
testEnvironment: 'jsdom',
// transformIgnorePatterns: ['node_modules/(?!variables/.*)'],
}

remember set the testEnvironment to 'jsdom'

xl ama slim fit • Sep 28 '21

I had the same problem, got it to working by downing
jest version to 26.6.3
ts-jest to 26.5.6

here is my package.json

{
"name": "vite-testing",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview",
"test": "jest src"
},
"dependencies": {
"vue": "^3.2.13"
},
"devDependencies": {
"@types/jest": "^26.0.2",
"@vitejs/plugin-vue": "^1.9.0",
"@vue/test-utils": "^2.0.0-rc.15",
"jest": "^26.6.3",
"ts-jest": "^26.5.6",
"typescript": "^4.4.3",
"vite": "^2.5.10",
"vue-jest": "^5.0.0-alpha.10",
"vue-tsc": "^0.3.0"
}
}

xl ama slim fit • Sep 28 '21

the problem now is it's passing while it shouldn't lol

lemredd • Feb 15 '22

This also worked for me

webmapLee • Jan 30 '22

i have same problem, just use @vue/vue3-jest

Jimmy • Jul 15 '21

I got the same error. How to fix this ?

Gábor Soós • Apr 12 '21

Can you share code alongside the error message?

Sœtz - Simon Lecutiez • Apr 16 '21

I tried it again, and I think I got it right this time. Thanks!

Keith Nicholas • Apr 30 '21

I tried this from a freshly created vite/vue ts project and just ended up with

import { mount } from '@vue/test-utils';
^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Hung Viet Nguyen • Apr 9 '22

If any of you guys setting for Vue Javascript, or having .js file in theproject, the jest.config.js file should look like this to avoid the error SyntaxError: Cannot use import statement outside a module.

// jest.config.js
module.exports = {
  moduleFileExtensions: [
    'js',
    'ts',
    'json',
    'vue'
  ],
  transform: {
-    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.(js|ts)$': 'ts-jest',
    '^.+\\.vue$': 'vue-jest'
  }
}

@vuesomedev Can you update the post to include .js files to use ts-jest as well. Since typecsript.json might have option "allowJs": true.

Cindr Mon • Dec 26 '21

hio! i don't know what im doing wrong, but its giving me this error: TypeError: Cannot destructure property 'config' of 'undefined' as it is undefined. Have you encountered this error, and how do you fix it? Thanks

Victor Neves • Jan 13 '22 • Edited

Hey
It's not working for me.
I'm dealing with the same problem that was already mention before, and I tried to follow what they did to fix but didn't worked for me.