DEV Community

Cover image for Integrating Jest Testing into an Existing Vue 3 Project with ViteJs

Integrating Jest Testing into an Existing Vue 3 Project with ViteJs

⚡ Nirazan Basnet ⚡ on July 07, 2023

In my recent experience, I faced the challenge of integrating the Jest testing framework into an existing Vue3 js project that was built with Vite....
Collapse
 
chronicstone profile image
Cyprien Thao •

Although the guide in itself is pretty well written, I don't really see why would one want to use jest in a vite app, in a world where vitest exists.

Vitest gives you :

  • incomparable perfs & run time
  • jest-compatible API
  • first class 0 config intégration with vite
  • support for vite plugin API

There might be exceptions, but overall I recommend anyone working on a vite app to use vitest over jest

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) • • Edited

I was wondering about Vitest actually...

But to be fair, it took a while for me to realize that Vitest actually exist, haha.

Collapse
 
blindfish3 profile image
Ben Calder •

I just moved a Sveltekit project from Jest to Vitest and it was fairly straightforward. It's possible to retain the Jest test helpers so I only had a few trivial changes in the tests themselves and otherwise just some config changes.

Try it! Then you'll have some material for a follow up article ;)

Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡ IntegridSolutions •

Thanks for replying. I truly understand that but the requirement here is to integrate JEST so and it is stable and widely used so. But in future definitely I will research Vitest and will write a blog about it. :)

Collapse
 
yi_cao_ced436862be5ca9006 profile image
yi cao •

I have a Vite repository with only version 3, but the latest Vitest requires version 5 or above. Instead, I might choose Jest, which is not coupled with the framework.

Collapse
 
tomatopotato27 profile image
Tshering Lama •

Overall, this blog post has given me the confidence and knowledge to integrate Jest testing seamlessly into my Vue 3 project with ViteJs. It's a fantastic resource for any Vue developer looking to level up their testing game. Thank you for sharing this informative guide!

Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡ IntegridSolutions •

Thankyou :)

Collapse
 
vadimcpp profile image
Vadym Kaninskyi •

It works! Thank you.

Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡ IntegridSolutions •

Ur welcome :)

Collapse
 
yatharthaa profile image
Sandip Bhandari •

Awesome article, help me a lot
Thanks

Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡ IntegridSolutions •

Thankyou :)

Collapse
 
ravin_regmi_703d409787237 profile image
Ravin Regmi •

Great article with step by step guide to integrate in my Vue 3 project
This is exactly what I was looking for...
Hope to see more of such posts.

Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡ IntegridSolutions •

Thankyou :)

Collapse
 
sirjamesbrown profile image
James Brown •

Curious, i'm getting this using your npm script (kubuntu / node 19) on fresh project

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @modules/vue@1.0.0
npm ERR! Found: babel-jest@26.6.3
npm ERR! node_modules/babel-jest
npm ERR!   babel-jest@"^26.6.3" from jest-config@26.6.3
npm ERR!   node_modules/jest-config
npm ERR!     jest-config@"^26.6.3" from @jest/core@26.6.3
npm ERR!     node_modules/@jest/core
npm ERR!       @jest/core@"^26.6.3" from jest@26.6.3
npm ERR!       node_modules/jest
npm ERR!         peer jest@">= 24 < 27 " from vue-jest@5.0.0-alpha.10
npm ERR!         node_modules/vue-jest
npm ERR!         1 more (the root project)
npm ERR!       1 more (jest-cli)
npm ERR!     jest-config@"^26.6.3" from jest-cli@26.6.3
npm ERR!     node_modules/jest-cli
npm ERR!       jest-cli@"^26.6.3" from jest@26.6.3
npm ERR!       node_modules/jest
npm ERR!         peer jest@">= 24 < 27 " from vue-jest@5.0.0-alpha.10
npm ERR!         node_modules/vue-jest
npm ERR!         1 more (the root project)
npm ERR!     2 more (jest-runner, jest-runtime)
npm ERR!   peer babel-jest@">= 24 < 27" from vue-jest@5.0.0-alpha.10
npm ERR!   node_modules/vue-jest
npm ERR!     dev vue-jest@"^5.0.0-alpha.10" from the root project
npm ERR!   1 more (the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @vue/vue3-jest@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: babel-jest@29.6.2
npm ERR! node_modules/babel-jest
npm ERR!   peer babel-jest@"29.x" from @vue/vue3-jest@29.2.4
npm ERR!   node_modules/@vue/vue3-jest
npm ERR!     dev @vue/vue3-jest@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sirjamesbrown profile image
James Brown •

assuming i'm not just being silly