Why Vitest Is Better Than Jest

Why Vitest Is Better Than Jest

Web Dev Simplified

2 года назад

129,707 Просмотров

Vitest is a simple testing library built on top of Vite which takes everything I love about Jest and brings it to the modern age of JavaScript. Everyone that has worked with Jest knows how much of a pain it is to work with ES modules, but Vitest makes it trivial. Vitest also adds many additional features and quality of life changes that make it better than Jest in my opinion.


📚 Materials/References:

Jest Tutorial Video: https://youtu.be/FgnxcUQ5vho


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:44 - Create a vite project
01:33 - Basic vitest tests
05:51 - Test coverage reports
08:16 - Inline testing


#Vitest #WDS #Jest

Тэги:

#webdevsimplified #vitest #vite #vitest_js #vite_js #javascript #js #jest #jest_js #jest_javascript #vitest_ts #vite_ts #vitest_typescript #vitest_vs_jest #mocha #mocha_js #mocha_vs_jest #mocha_vs_vitest #chai_vs_vitest #chai #chai_js #chai_ts #chai_vs_jest #testing_js #testing_library_js #javascript_testing #javascript_testing_library
Ссылки и html тэги не поддерживаются


Комментарии:

Legends_Assemble
Legends_Assemble - 21.10.2023 23:38

Thanks!

Ответить
@XIXIYOSHIMAHANKIFIZA2565
@XIXIYOSHIMAHANKIFIZA2565 - 15.08.2023 21:20

can we use Vitesh with NextJS pls make a video on this and latest unit testing video

Ответить
Joao Paulo
Joao Paulo - 01.08.2023 03:49

I have lots of nightmares with configuration files for everything, whether it is Eslint, Tsconfig, BabelRC, webpack, there's pratically no material outside the docs about them, i was having so many issues trying to config jest for react/typescript vite builded projects. and then i found this video, you're a lifesaver.

Ответить
Arshad Siddiqui
Arshad Siddiqui - 20.07.2023 16:03

Can you show us this with a normally setup typescript project. I keep getting errors. When using Vite it is pretty seemless though.

Edit: Wow it just fixed itself after restarting the IDE. A developer problem needs developer solutions lol.

Ответить
lovely boy
lovely boy - 03.07.2023 01:36

Jesus so fast and helpful information ❤

Ответить
Tenebrae
Tenebrae - 22.06.2023 20:40

👏

Ответить
M27Lab
M27Lab - 28.05.2023 18:02

hi in one folder all of my test file are running parallel , so for testing database conflict data and failed many test.
but when I run one file at a time all test are passing.

how are configure vitest in a way so that it only run one testfile at a time?

Ответить
Flavio Silva
Flavio Silva - 26.05.2023 20:48

Hey nice video, help a lot.
Who to have the `describe`, `expect`, `test`/`it`, etc... global? 😅:)

Ответить
Abhishek Mishra
Abhishek Mishra - 12.04.2023 18:18

Hey Kyle, please make a similar video for end to end testing using react native expo+ detox, it would be of great help

Ответить
Benjamin Venezia
Benjamin Venezia - 22.03.2023 12:25

Hello, whats about vitest + react native? Ty

Ответить
Luke M
Luke M - 20.03.2023 22:45

Thanks! 😀 How to persist rendered component between tests to make an e2e test? It resets the rendered component every time ?

Ответить
Vivek Kaushik
Vivek Kaushik - 12.03.2023 20:18

What's the benefit of using inline-test?

Ответить
Calvin Choy
Calvin Choy - 10.03.2023 09:37

Sadly vitest is much slower then jest and this issue is still not solved after a year

Ответить
AA.
AA. - 09.03.2023 16:04

npm create vite . already doesn't work for me lol

Ответить
Joshua Smith
Joshua Smith - 05.02.2023 08:59

I never had an issue using import in jest... so it is hard to argue for that to be the reason to switch. I'd be more interested to see how to test UI components with vitest.

Ответить
Vamshi Krishna Pothuka
Vamshi Krishna Pothuka - 03.02.2023 00:44

vitest has been very slow in CI pipeline, supposedly 2-3 times slower than jest. I am surprised no one talking about that. We moved to vitest, saw how slow it is and moved back to jest.

Ответить
Mr. Random
Mr. Random - 08.01.2023 04:43

Is vitest faster than jest with SWC (Rust)?

Ответить
Gritsienko Oleg
Gritsienko Oleg - 22.12.2022 15:56

Thank you so much) Very helpful!

Ответить
Shu Pesmerga
Shu Pesmerga - 21.10.2022 02:36

Where do I configure vitest for In-source setup on vanilla JS
where do i put "types": "vitest/importMeta"

Ответить
Shu Pesmerga
Shu Pesmerga - 18.10.2022 11:59

I'm a simple man, if it's new I install it

Ответить
Huey Vam
Huey Vam - 05.10.2022 18:06

What import / export issues in Jest?

Ответить
Nico Lindenau
Nico Lindenau - 05.10.2022 09:18

Why is Typescript not complaining when you call sum without any arguments? The function should only accept an array with numbers. What am I missing?

Ответить
Enyak Stew
Enyak Stew - 04.10.2022 17:19

I have been struggling for hours trying to setup a react app created with vite and jest until I came across this video. Thank you for this !

Ответить
hui zhong
hui zhong - 20.09.2022 11:17

amazing

Ответить
inasuma
inasuma - 02.09.2022 00:42

Jest is very simple already. I’m surprised there is a concern that it’s too complicated. Using babel-jest you can compile down your test code which automatically gives support for modern JS including import/export.

Ответить
CHUCK
CHUCK - 06.08.2022 02:52

I'd be interested to see how Vitest handles error reporting. Jasmine / Karma is fucking horrible with presenting errors in a comprehensive format. You can spend hours trying to find out what's wrong. Jest has been slightly better over the last year. Wonder how good this is when you're working with subscriptions, fake async zones, state etc.

Ответить
Murphy Chen
Murphy Chen - 22.07.2022 06:47

awesome

Ответить
T jay
T jay - 20.07.2022 12:12

Vite created by vue framework creator 🔥😍

Ответить
Jake
Jake - 06.07.2022 20:36

I saw this video and thought it would be cool to use it in node. But it has not been smooth sailing. Can you do a video for vitest on nodejs?

Ответить
Just Do Everything
Just Do Everything - 01.07.2022 00:29

Vitest is sooooo fast! I'm loving it!

Ответить
SithLordBishop
SithLordBishop - 27.06.2022 17:06

Love to see a follow up on how mocks work.

Ответить
syz
syz - 25.06.2022 21:46

so, Why Vitest Is Better Than Jest ?????

Ответить
SithLordBishop
SithLordBishop - 25.06.2022 01:41

Jest drives me mad. Ill have to play with this! Love Vite!

Ответить
eyyMinda
eyyMinda - 21.06.2022 02:23

I'm getting an error "No test suite found in file .../vite.config.ts" Can't seem to find a solution :(

Ответить
Alex Sherzhukov
Alex Sherzhukov - 19.06.2022 21:03

Video named Why Vitest Is Better Than Jest yet not a single reason to use it besides a single controversial feature

Ответить
LifeExplorer
LifeExplorer - 19.06.2022 08:36

💯

Ответить
Kshitiz Shah
Kshitiz Shah - 16.06.2022 04:29

Good, but frequently transition on every new tech is bad

Ответить
qwertt14
qwertt14 - 15.06.2022 15:47

"it's superfast, it took only 2ms" to sum 2 and 2 ;/ At least try summing a couple thousand numbers

Ответить
Ahmed Ashraf
Ahmed Ashraf - 14.06.2022 17:35

Am i right that apis are methods properties from a library or framework and URLS like rest

Ответить
karthik M.
karthik M. - 14.06.2022 16:16

Pathfinder visualizer project with Vanilla javascript

Ответить
Gaurav Dobriyal
Gaurav Dobriyal - 14.06.2022 07:58

Please make a video on dataset in javascript I am really confused.

Ответить
Twi1ightFr0st
Twi1ightFr0st - 14.06.2022 06:26

does anyone here not use any testing library, but use only console.assert with conditionals that run in dev but not in prod? seems lot simpler

Ответить
Warren Cedro
Warren Cedro - 14.06.2022 05:14

This is great, could you make a video about Turborepo implementing Vite and Vitetest?

Ответить
Nik P
Nik P - 13.06.2022 19:16

I'm seeing a lot of frustration from folks that are using Jest and don't see the benefit of converting to Vitest, so I thought I would share my experience when switching over. I'm working on a back-end Node API that exposes a Graphql endpoint, and also a Sveltekit project. I have used Vitest in both.

- When trying to work with Jest (and also Mocha) I experienced huge hurdles in working with ESM and typescript. The "solution" was to maintain a different tsconfig for testing as the production config, which means they could easily migrate away if I wasn't careful. Also modules in testing were compiling to commonjs and for production were compiling to ESM.
- My first attempt to fix this was to use Uvu and TSM together, and I was actually pretty impressed with it. However it is minimal, so any mocking or anything else I was doing needed to be done by hand. This was also an issue for front end testing in Sveltekit. Rather than reinvent the wheel, I gave Vitest a shot and it works great. I was able to get rid of the tsconfig.testing.json file entirely, and still make use of the larger Jest-like API offered by Vitest
- Initial test run performance of Vitest vs Mocha (which was similar to Jest when tested previously) were about the same. Uvu did actually go a bit faster right out of the gate, but not really enough to notice. (half a second or less difference) HOWEVER once the test runner was running in watch mode, Vitest was orders of magnitude faster than Jest and Mocha and about twice as fast as Uvu. I think this has to do with the Hot Module Reloading in Vite.
- When working in Sveltekit, Vitest just worked. Since Vitest uses the same Vite config, this wasn't all that surprising.

Overall I've been happy with Vitest and don't see myself going back to Jest any time soon.

Ответить
다람쥐
다람쥐 - 13.06.2022 17:02

Nice hair style

Ответить
Alessio Michelini
Alessio Michelini - 13.06.2022 15:53

Sorry man, I generally love your videos, but apart from inline testing, which I would generally prefer to avoid, you can do exactly the same as you did with vitest, with just Jest...

Ответить
sysmat
sysmat - 13.06.2022 12:52

when adding vitest my eslint fail,

Ответить
elgalas
elgalas - 13.06.2022 10:52

"Why Vitest is Better than Jest", links to a Jest video, and says the API is built on top of Jest. Catchy titles much?

Ответить
Acharya
Acharya - 13.06.2022 07:25

I can't able to install create react app with yarn which step of command i have to follow

Ответить
Marcos Adriano
Marcos Adriano - 13.06.2022 00:04

Vite and Vitest save much time, another solution is Jest with SWC instead Babel, its runs really good too.

Ответить