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 ⚡

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 ⚡

Thankyou :)

Collapse
 
vadimcpp profile image
Vadym Kaninskyi

It works! Thank you.

Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡

Ur welcome :)

Collapse
 
yatharthaa profile image
Sandip Bhandari

Awesome article, help me a lot
Thanks

Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡

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 ⚡

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