Front-end testing for practical use - Part 2. Testing in depth: Visual regression and E2E testing

hello!
There have been updates to the versions of vitest, storybook, and cypress over the past few months since the course was released.

Actually, there are no major changes to the setup or writing method, so we did not update it quickly, but we updated it so that it can be helpful for setup.

The only major change is that the dependency on storybook-addon-react-router-v6 has been changed to storybook-addon-remix-react-router , but there are no major changes, so please keep that in mind.

The remaining library dependency changes include:

• node: 19 -> 20

• vitest: 0 -> 2

• storybook: 7 -> 8

• cypress: 12 -> 13

• Action version update

Please note that you can check it in the latest branch !

• https://github.com/practical-fe-testing/test-example-shopping-mall/tree/latest

Additionally, when I have time, if there are any updates to RQ or improvements to the project structure, I will upload them to the latest branch and get back to you. Of course, if there are any major changes in test-related dependencies, I will quickly reflect them and upload them!

Well, I hope you have a happy holiday and a good rest. Thank you!

Hello! I would like to share with you an update on MSW, which we are introducing in our lecture.

It's been about 3 months since MSW 2.0 was released. I was a little taken aback when it was released while I was finishing up filming the lecture ( 😇 ), but I was planning to update the code and share it with you once it became somewhat stable.

As the level of abstraction changes, the API specification has changed significantly, and support for ReadableStream, ESM compatibility, etc. have been added. At first glance, it may seem like a big change, but the changes are not as big as you might think, and when I personally used it, it was much clearer and better!

I think it would be good to study together by referencing the content since I have updated the branches separately so that students taking the class will not be confused.

Well, the weather has gotten colder, so be careful not to catch a cold and have a good day!

⚠ Please understand that we have applied the canary version because the support for msw-storybook-addon is not yet fully implemented. We recommend that you update to the corresponding version once the PR is finalized and the official distribution is made.

• Branch: https://github.com/practical-fe-testing/test-example-shopping-mall/tree/msw-2.0

• Introducing msw 2.0: https://mswjs.io/blog/introducing-msw-2.0

• 1.x -> 2.x Migration Guide: https://mswjs.io/docs/migrations/1.x-to-2.x

• msw-storybook-addon PR: mswjs/msw-storybook-addon#122

Hello! I am Code Joker Off, an instructor of a front-end testing course that can be applied directly to real-world situations.

The greeting is a little late.
I wish you a happy new year, seniors and fellow developers. 🙇
It's been almost a month since the course was released, and you've been studying front-end testing together for over 350 minutes .
Thank you for choosing us!

Did you have any concerns while taking the class?
In that case, it might be a good idea to check if there are people in the community who are having similar concerns.
If not, feel free to ask questions! I'll check and answer as quickly as possible.
(We are currently responding to all questions within 12 hours .)
Many people have already left questions.
I think it would be helpful to look at the questions we posted together so that we can think about them together while studying.
( 💡 If there are good questions, we will consider collecting them and sharing them together.)

• Check out the questions: https://bit.ly/3NWe78i

If you liked the lecture, please leave a review, and if you have any questions, please leave them!
I hope this lecture will help you learn front-end.
Well, have a nice day! 👋