Using Storybook stories with Testing Library

[@davidfromnorth7836]

wow that's insane! Thank you! Definitely should play around this code. I should admit that you have very special and helpful content! Keep going!

[@SwashbucklingwithCode]

I appreciate that.

[@chaninator512]

This honestly needs more views

[@SwashbucklingwithCode]

Thank you. Perhaps someday.

[@dominicnguyen5465]

This is a super helpful technique! Less mock duplication when you reuse stories in testing lib tests. Easier to maintain as well.

[@danilocastro1281]

Awesome video! Content, explanation, and image quality. Thank you!

[@SwashbucklingwithCode]

I really appreciate the feedback, thank you.

[@jorgeduran1886]

Wow, this is very worth knowing, I've never thought of this way of testing components, I'm surely gonna give it a try and keep up making cool videos like this

[@SwashbucklingwithCode]

Thank you for the kind words.

[@Norfeldt]

Thank you for making this video - it was really useful for me.

[@licokr]

Amazing Video! Thank you, it really helped me. Easy explanation, and the detail, it's perfect

[@SwashbucklingwithCode]

Well thank you for saying so.

[@ДмитрийКарпич]

Oh, thank you for sharing this technique. It probably looks like a great alternative to the Cypress test (most of them).

[@SwashbucklingwithCode]

No problem. And I think you'd still want Cypress for any E2E tests, these are more like unit and maybe integration tests depending on your setup.

[@Apofisbg]

Very useful video! Thanks a LOT

[@antonifkiara7332]

Thanks homie

[@AdityaShaw-qh1qc]

What are the packages necessary to run the tests?

[@ashwinichougale3432]

How to display react test cases on storybook addon.

[@mmmodel]

This guy it's the Jesus of the development

[@tshawchit]

He probably gets that a lot outside development too 😂

[@roberto9369]

People say that He didn't like to deploy new miracles on Fridays

[@arhamali20022002]

Which vs code icons you are using ?

[@shashibhushanv6301]

This video is really help full. can you please make a video testing a component where you have .mdx and how we can interactive testing using play function, we are using the latest story book version 6.4 I am using interactions add on and testing library but struggling to get my first test pass :(

[@SwashbucklingwithCode]

I don't use MDX stories anymore due to them being a bit too finicky for me, but I used to like them a lot for documentation. I'm about to get more in depth on my current projects with play functions so if I make some breakthroughs I'll likely make a video on it.

[@josephlarsen]

couldn't you use Default.args.slides[0] instead of hardcoding /swashbuckling/i into your test? That way you could use the array that's defined in your story in your test directly so that when it changes in the story it changes in the test automatically to match? Or will that not work?

[@chrisvolonnino3567]

what font and theme are you using for visual studio code?

[@SwashbucklingwithCode]

The theme I use is Everset, which I created. I am not sure what the font was at the time but it might be Cascadia Code.

[@chrisvolonnino3567]

@@SwashbucklingwithCode You should add your theme to the marketplace! Cheers

[@SwashbucklingwithCode]

@@chrisvolonnino3567 It's on the marketplace, here: marketplace.visualstudio.com/items?itemName=jimmydc.everset

[@Troy-ol5fk]

what are the benefits of using WSL ubuntu ?

[@SwashbucklingwithCode]

For me, it's having my gaming machine, with easier/better video capturing and audio support, plus multi-monitor proper screen sharing support on calls or recording programs, be the same computer as my work where I prefer linux. KVM might seem like an option but it's quite difficult to get one with all of the features I need without it costing thousands of dollars (and then still missing stuff). Everyone has different preferences, so it for sure isn't for everyone, but I've tried so many different setups and this is the best for me right now.

[@MsAnnieHuang]

Do we have the source code for this tutorial?

[@SwashbucklingwithCode]

I'm a little late on this, but I've uploaded the code to a repo here: github.com/Jimmydalecleveland/storybook-tests-react

[@tony-ma]

do you use cypress for e2e testing? looking for some content on those. Or any testing in general. Testing javascript, in general, is harder than .NET backend (at least for me it is the case.). But with these tools and thanks to the model javascript. It is easier now.

[@SwashbucklingwithCode]

I have used Cypress for that, yah. Frontend testing is full of challenges, for sure. Chromatic is a big leap forward for testing in general, and I hope to see more things like that for component level tests.

[@sanjeevmerugu2398]

how to write testcases in angular storybook

[@SwashbucklingwithCode]

I don't use Angular but there is a Testing Library for Angular package so I don't imagine it'd be different at all: testing-library.com/docs/angular-testing-library/intro/

[@vickylance]

But how can I run just for a single file rather than entire directory? I would prefer in a tdd style manner where the coverage will report for the files that I run the test for because one it gives me immediate feedback on how much I am covering by my test cases and two the source code that I work on is very huge that it takes 56 mins to run the entire test coverage

[@SwashbucklingwithCode]

Are you asking about just running the tests, or running the coverage report? For just running the tests, watch mode automatically attempts to only rerun tests for the files that you've changed. You can also use Jest filtering to only run specific files or tests by name. All that said, 56 mins seems like a very long time for a test suite, even one with a ton of files. It's possible that's normal for your use case, but I'd try to make sure all those tests are just unit tests (as opposed to integration tests), and aren't waiting for long async calls.

[@vickylance]

@@SwashbucklingwithCode I was thinking of running jest in watch mode along with the coverage report of the file/files it's currently running test in. I think filtering will do but it would be better if it takes the file name as argument and runs the coverage also only in that file when running in watch mode that will make it easier for TDD as I then don't have to check coverage before committing

[@SwashbucklingwithCode]

@@vickylance I haven't had much success with the accuracy of coverage + watch mode, but I haven't put a ton of effort in either. I also use Husky to run precommit hooks that check coverage and tests passing on any code that has changed.

[@hyfydistro]

I've heard of "End to End" or E2E testing but I'm not sure how to go about it. Another nice video btw!

[@SwashbucklingwithCode]

I'm still planning out how I want to cover the rest of the "testing" topic, but E2E can be tricky because it is quite dependent on your setup and needs. I'm also still learning in that area.

[@hyfydistro]

@@SwashbucklingwithCode I'm aware of Unit Testing, Integration Testing and E2E but I'm not sure what qualifies as it. I'm not sure when to use it either or how to put it in my development workflow. I hope that gives you an idea. I'm still new to it! 😁

[@SwashbucklingwithCode]

@@hyfydistro This is useful to know, thank you for elaborating.

[@davidfromnorth7836]

​@@hyfydistro Hey! Check out cypress! Great for e2e testing!

[@super4prikolist1]

Jesus' opinion is always worth it, thanks !

[@fardeenpanjwani8160]

Dude low key looks like Jared Leto. Great tutorial though.

[@santhoshraghavpidathala3701]

Please note down my request on promises(all, race, etc...), async await, generators with real time example. Please don't do example with setTimeout, etc...

[@graezzywormz1438]

jesus criest

[@asgard-hehe]

jesus