Learn Vitest and Testing Library In 40 Minutes

  Рет қаралды 58,954

Program With Erik

Program With Erik

Күн бұрын

Пікірлер: 62
@ProgramWithErik
@ProgramWithErik 2 жыл бұрын
👉 Want to win prizes Break the Code 2!? Play for free here - go.tech/pwebtc
@abuzain859
@abuzain859 11 ай бұрын
Hey Erik ! I watched your video and it is awesome . Now i am using the Vitest in my project but I am getting this error : ( Not implemented: window.computedStyle(elt, pseudoElt) at module.exports (C:\Users\Faizan\Desktop\full-stack ode_modules\jsdom\lib\jsdom\browser ot-implemented.js:9:17) )
@someonelastname8175
@someonelastname8175 12 күн бұрын
Thanks. Learnt a lot about mocking out service end points as I migrate from webpack, mocha, chai, jest over to vite, vitest, esbuild etc.
@MikeMcBride1007
@MikeMcBride1007 2 жыл бұрын
This is easily the best tutorial I’ve found on getting tests set up in a Vue 3 app with Vite and testing library. Really great stuff, thanks so much!
@mohammadrashid1994
@mohammadrashid1994 3 ай бұрын
Thank you for the video man. I desperately needed it.
@hamidzangiabadi3899
@hamidzangiabadi3899 Жыл бұрын
best tutorial for testing with vitest
@Dryzark
@Dryzark 2 жыл бұрын
Thank you for this! Exactly the video I needed. 👍
@abuzain859
@abuzain859 11 ай бұрын
Hey Erik! I watched your video and it is awesome . Now i am using the Vitest in my project but I am getting this error : ( Not implemented: window.computedStyle(elt, pseudoElt) at module.exports (C:\Users\Faizan\Desktop\full-stack ode_modules\jsdom\lib\jsdom\browser ot-implemented.js:9:17) )
@SuperQuwertz
@SuperQuwertz 2 жыл бұрын
Thank you for this video! For svelte it would be so awesome to have a "test" tag in the file where you put all the tests
@manchineel
@manchineel 2 жыл бұрын
This was very helpful. I am trying to figure out marking and this made it a lot more clear
@masibulelemgoqi981
@masibulelemgoqi981 2 жыл бұрын
Best explanation... how can one get your vscode setup?
@maxigarrett3121
@maxigarrett3121 2 жыл бұрын
muchas gracias por el video sos el unico que explica como hacer un mock.. saludos desde argentina
@danieltkach2330
@danieltkach2330 Жыл бұрын
This is amazing, but I'm still confused by the Vue element here. Can you do one for React please please please?
@sibabalejoja9741
@sibabalejoja9741 Жыл бұрын
What VS Code plugin are you using for auto completion?
@caiovinicius7871
@caiovinicius7871 2 жыл бұрын
GOD BLESS YOU! THAT'S WHAT I NEEDED FOR MONTHS!
@richcoleman4244
@richcoleman4244 2 жыл бұрын
please never stop
@mcoria74
@mcoria74 Жыл бұрын
Very helpful, thanks a lot for the video, regards from México :)
@ProgramWithErik
@ProgramWithErik Жыл бұрын
Glad it was helpful!
@AntonioGomes-tu4yf
@AntonioGomes-tu4yf Жыл бұрын
Thank you, friend.
@erickzelaya3651
@erickzelaya3651 2 жыл бұрын
Hey Erik, what is the use case of mocking the API? What happens if the API response is not what the frontend expects, in that case the test will always passed because you are using the mock data instead of getting the actual API response.
@woalk
@woalk 2 жыл бұрын
You might not want to bombard an actual production API with test requests, especially when they are run automatically multiple times per day.
@eNk91
@eNk91 2 жыл бұрын
You could probably just write a script to generate the mock files by calling the actual API. Then just run that script / collection process on whatever schedule you’re comfortable with. That gives you the best of both worlds as far as not blasting the production API and still being able to catch changes in a reasonable timeframe if they happen.
@DodaGarcia
@DodaGarcia Жыл бұрын
Ideally you have a separate test for the "contracts" with all APIs that would catch that, possibly running on a schedule or as part of a merging/deployment step since APIs don't change that often. That not only avoids burdening other parts of the code with external API calls, which are slow and expensive, but it also keeps those concerns separate. Your presentational front-end components should worry mostly about taking data that *does* have the expected structure and content and presenting it in a certain way.
@ЄвгенійБабенко
@ЄвгенійБабенко 7 ай бұрын
Thank you. Greate video
@edgarasspiridonovas4978
@edgarasspiridonovas4978 2 жыл бұрын
I would suggest make video on testing library and in compintion of something more complex like most used vuetify or element UI 3rd parry libraries covering whole component and making it difficult for new developers to test their code, mostly when Vue Testing Library itself does not really provide clear way to do it.
@henryfougere8677
@henryfougere8677 2 жыл бұрын
it looks like it's not actually loading the mockPokemon during the test. It's still using the real rest call. Can you check?
@ravikalkote1729
@ravikalkote1729 6 ай бұрын
I am getting below error Vitest error "SyntaxError: Need to install with `app.use` function" when using vue-i18n plugin for Vue3
@yabuking84
@yabuking84 2 жыл бұрын
How does screen and render works? I see that you dont assign a variable to render?
@yousoufessa2438
@yousoufessa2438 2 жыл бұрын
Render method throws error invalid value in weak type set
@hanes2
@hanes2 2 жыл бұрын
this render function doesn't work. Cannot find module 'vue-template-compiler', which after I tried to install that one, I got dependency issue of being linked to a vue2.6 something.
@NikosKatsikanis
@NikosKatsikanis 2 жыл бұрын
anyone got this to with with react 17? I'm getting Error: Cannot find module 'react-dom/client' upgrading to r18 removes this
@misbahansori
@misbahansori 2 жыл бұрын
How to console.log variable in vitest? I have tried to do that but it won't show in the terminal? I just want to know the value of the variable.
@ProgramWithErik
@ProgramWithErik 2 жыл бұрын
It shows in the test output.
@TheZhouh12
@TheZhouh12 2 жыл бұрын
Testing Library already does what Vitest offers, so what's the reason to use Vitest over Testing Library?
@edgarasspiridonovas4978
@edgarasspiridonovas4978 2 жыл бұрын
Vitest is insteard of test runner (for example insteard of Jest) The Testing Library serves for different purpose.. You use it together with Vitest.
@NikosKatsikanis
@NikosKatsikanis 2 жыл бұрын
anyone got history mocking to work with vitest and jsdom?
@despertaweb4793
@despertaweb4793 Жыл бұрын
I don't see the point of installing testing-library. I you check the Expect API of Vitest is waaaay intuitive. Cound you explain why you choose testing-lib?
@SecondKing_2K
@SecondKing_2K 2 жыл бұрын
Sir I working on a vue3 project, now chunk-vendor.js file is too large. Is there any way I can reduce the file size?
@destabiliseus
@destabiliseus 2 жыл бұрын
Try to install and run vite-bundle-analyzer, it visualize all your dependencies so you can see what and how much it weights. Also if you have a heavy dependencies you should load (import) them dynamically, meaning only when you really needed.
@SecondKing_2K
@SecondKing_2K 2 жыл бұрын
@@destabiliseus thankyou sir
@DedicatedManagers
@DedicatedManagers 2 жыл бұрын
Your videos get more and more professional looking. You’ve got great audio and fantastically lighted background. You might want to work on the lighting on your face, though. Your forehead is oversaturated and the lighting makes your eyes look shadowed dark, which gives you a Herman Munster look. Maybe try diffusing the lighting a bit more and/or lower it (or add some lighting from the bottom).
@hanes2
@hanes2 2 жыл бұрын
im getting a lot of errors, I assume it's because I don't write typescript.
@devKazuto
@devKazuto 2 жыл бұрын
Pokémon is already the plural. It's the abbreviation for `Pocket Monsters` 😅
@ProgramWithErik
@ProgramWithErik 2 жыл бұрын
Aww thank you!
@erickzelaya3651
@erickzelaya3651 2 жыл бұрын
Who cares man
@ehutch79
@ehutch79 2 жыл бұрын
Does VSCode need to be this zoomed in? I feel like if you're using this for a tutorial you can wait for hd video to load to read the text?
@ProgramWithErik
@ProgramWithErik 2 жыл бұрын
Yeah, I recorded up to 4k, so if you can't see it you can go to that format. I do have my VSCode font upped up quite a bit already.
@ehutch79
@ehutch79 2 жыл бұрын
@@ProgramWithErik I meant going the other way. Having so little code on the screen due to the large font size is a detriment. It's hard to tell what's going on as soon as there's anything significant going on. Maybe two hits of ctrl- would be better?
@CarnSarnit
@CarnSarnit 2 жыл бұрын
@@ehutch79 Eh, I prefer larger text over small. On other channels, small text can be impossible to read if a wifi hiccup drops the quality below 1080. And while I don't watch coding videos on mobile, I imagine small text would suck on small screens.
@michaelpumo83
@michaelpumo83 2 жыл бұрын
Many people watch these kind of videos on their phones (I do too). It makes it easier to see. Otherwise the code is far too tiny.
@RezaMohseni
@RezaMohseni 2 жыл бұрын
@@michaelpumo83 He's sharing his desktop, it's not really suited to watch on a small screen. Either way, I too feel its way too zoomed in, to the point it gets in the way of having an overview and learning.
@satsite13
@satsite13 2 жыл бұрын
... does anyone else hear Eric from Veritasium?
@ProgramWithErik
@ProgramWithErik 2 жыл бұрын
Ha! Yes, that's the music I used. Do you like it>
@SpicySauCay
@SpicySauCay 9 ай бұрын
veritasium
@hlulanibaloyi5503
@hlulanibaloyi5503 7 ай бұрын
Hi, I'm using Lit and on my setup I get a "ReferenceError: customElements is not defined ❯ node_modules/@lit/reactive-element/src/decorators/custom-element.ts:60:", wondering if I'm missing something?
@rakibullahsazib1268
@rakibullahsazib1268 2 жыл бұрын
As a vue developer I don't see any value in TestingLibrary. Vue test utils is awesome, specially the documentation. I don't get why it is being promoted in the vue docs. May be it is good for developers working with react or svelte.
@edgarasspiridonovas4978
@edgarasspiridonovas4978 2 жыл бұрын
Its good with vue aswell, it has a bit less complexity and it strives for simplicity for example you avoid even testing another child component is in the component you test and focus on unit/comoponent it self where as vue testing utils does allow you to do it what is kind of getting into integration test..
@vasilipaspalas
@vasilipaspalas Жыл бұрын
good tutorial as I think the official documentation of Vitest is only suitable for referencing. However, and this is not on Eric, I don't like the fact you have to install so many extra's to get some basic testing.. and the mocking part made my eyes, ears and heart bleed. It seems so cumbersome. I would rather have vitest being a bundle and giving us a concise way of testing that should, lets be fair, only be a a side quest at best...
@szymeo69
@szymeo69 2 жыл бұрын
clueless
@hanes2
@hanes2 2 жыл бұрын
Apparently, now it's "import {render, screen} from "@vue/test-utils";
Stop Using .value with ref In Vue 3! Reactivity Transformed Explained!
14:22
Stop Writing So Many Tests
10:02
Web Dev Simplified
Рет қаралды 94 М.
Can You Find Hulk's True Love? Real vs Fake Girlfriend Challenge | Roblox 3D
00:24
How To Choose Mac N Cheese Date Night.. 🧀
00:58
Jojo Sim
Рет қаралды 87 МЛН
1, 2, 3, 4, 5, 6, 7, 8, 9 🙈⚽️
00:46
Celine Dept
Рет қаралды 109 МЛН
Vue Testing with Vue Test Utils
1:19:23
Laith Academy
Рет қаралды 47 М.
Unit Testing Vue Apps: Tips, Tricks, and Best Practices
29:51
Vue Mastery
Рет қаралды 13 М.
React Unit Testing Tutorial With React Testing Library and Vitest React
19:12
Monsterlessons Academy
Рет қаралды 13 М.
Why Vitest Is Better Than Jest
13:13
Web Dev Simplified
Рет қаралды 139 М.
React Testing Tutorial with React Testing Library and Jest
41:43
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 488 М.
Vue 3 Script Setup, The Future Of Vue? Tutorial And Setup
25:08
Program With Erik
Рет қаралды 59 М.
JavaScript Testing with Jest - Crash Course
1:00:34
freeCodeCamp.org
Рет қаралды 96 М.
Can You Find Hulk's True Love? Real vs Fake Girlfriend Challenge | Roblox 3D
00:24