DEV Community

Cover image for Add testing to Vite

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...
Collapse
 
soetz profile image
Sœtz - Simon Lecutiez • 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.

Collapse
 
webmaplee profile image
webmapLee

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'

Collapse
 
odinkraa profile image
xl ama slim fit

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"
}
}

Collapse
 
odinkraa profile image
xl ama slim fit

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

Collapse
 
lemredd profile image
lemredd

This also worked for me

Collapse
 
webmaplee profile image
webmapLee

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

Collapse
 
geminii profile image
Jimmy

I got the same error. How to fix this ?

Collapse
 
sonicoder profile image
Gábor Soós

Can you share code alongside the error message?

Collapse
 
soetz profile image
Sœtz - Simon Lecutiez

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

Collapse
 
keithn profile image
Keith Nicholas

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)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nvh95 profile image
Hung Viet Nguyen

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'
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
cindrmon profile image
Cindr Mon

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

Collapse
 
victorneves profile image
Victor Neves • 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.

Alt text
Alt text

Collapse
 
jaiko86 profile image
jaiko86

Worked like a charm.

Collapse
 
patrikbird profile image
PatrikBird

thanks for bringing vite back to my mind and all the nice vue content. keep it up!

Collapse
 
sonicoder profile image
Gábor Soós

thanks, planning to write about vue cli -> vite migration

Collapse
 
mattdeacalion profile image
Matt Deacalion

I'm currently in the process of migrating to Vite, that would be very helpful!

Collapse
 
modularcoder profile image
Gevorg Harutyunyan

Great article, thanks!

Collapse
 
zynth17 profile image
Christopher Reeve

how to do testing using the testing library with vite?

Collapse
 
quantuminformation profile image
Nikos
Collapse
 
geewhizbang profile image
Geoffrey Swenson

It isn't clear where either jest.config.js or cypress.json should be saved. Is it in src, or at the root of the project?

Collapse
 
geewhizbang profile image
Geoffrey Swenson

I have a component that has a router-link. The Vue2x methods of injecting the router into the test don't work. How do you do this with Vue3?