실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
코드 조커, 오프
이 강의를 통해 전반적인 프런트엔드 테스트 종류를 파악하고, 상황에 맞는 적절한 테스트 선택을 통해 신뢰감 있는 테스트를 작성하는 방법을 배웁니다.
초급
소프트웨어 테스트, JavaScript, e2e
BEST
Frontend Testing for Immediate Application - Part 1. Testing Basics: Unit & Integration Tests
Through this lecture, you will learn how to identify the overall types of front-end tests and how to write reliable tests by selecting the appropriate test for the situation.
Reviews from Early Learners
What you will learn!
Key concepts needed for writing tests
Frontend testing techniques to increase the reliability of your code
How to write unit and integration tests using vitest
How to use testing tools such as Testing Library and MSW
🎊 Event 🎊
Get your 30% coupon for Part 1!
📌 Link (77,000 -> 53,600 KRW)
1. How do I use a coupon?You can use your desired coupon by clicking on it in [Cart → Select Coupon → Available Coupons].
2. How do I register a coupon?You can register a coupon by entering your coupon code in [Cart → Select Coupon] or [Dashboard → Coupon Box].
If you've taken Part 1 lectures, get your 50% discount coupon for Part 2!
We are sharing a coupon for those who have completed all Part 1 lectures to purchase Part 2 lectures at a 50% discounted price. Please access the post below and use the coupon before purchasing!
📌 Post Link: Link
⚠️ This post is only visible to Part 1 purchasers.
We provide financial support for course fees to students and job seekers 💪
To make it less burdensome for students or job seekers without income, if you fill out and submit the form, we will provide you with a 50% discount coupon. If the application link is open, you can apply. We support your learning. Keep fighting! 🔥
📌 Application Link: https://forms.gle/ohs7KywvSGXoJXGM7
⚠️ This topic may be a bit challenging for those who are just starting to study FE. Please make sure to check the prerequisites before taking the course!
Are you having these concerns? 🤔
Frontend testing is
what does it verify
I'm curious about that
Manual testing on devices
is too repetitive and exhausting
I'm curious about
real frontend testing that's done
in actual work
Learn various types of frontend testing and write tests using examples close to real-world cases!
- 🤔 You've become somewhat familiar with building apps, but were you anxious about whether they would actually work well in a production environment?
- 🤔 You say testing is really necessary, but there are so many different frontend tests that you couldn't muster the courage to start, right?
- 🤔 Were you insisting on specific test types while wanting to verify and automate more things?
- 🤔 Did you want to organize what tests to write and clarify the purpose of testing?
If you have these concerns, you've come to the right place!
I recommend "Frontend Testing Applied Directly to Real Work" to you.
The course recommended by working frontend professionals!
"This is a course where you can learn everything from the necessity of test code to various types of testing concepts and how to utilize them. If you're not yet familiar with testing, you can solidly learn the concepts of testing through this course, and if you've previously written test code, you can learn more effective and meaningful test code through the course's examples and exercises to apply in real-world work."
- Kurly Frontend Developer Yoo Kyungsang
"When writing test code, there are moments when you need to convince yourself. 'Won't testing delay the development schedule?' 'Is it right to test this?' 'Should I test content that will be changed later?'"
This course demonstrates various techniques for how strategically you can test even a simple shopping mall site. After watching all the videos, I believe you'll be able to confidently write test code that you can personally understand and trust. I hope many people will watch these videos and gain confidence in testing.
- LINE Plus Frontend Developer Lee Sang-cheol
"This is a lecture that captures the essence based on practical examples, covering everything from why you should write test code to how to write it. Test code is an essential part of building reliable applications, but I think there were always many concerns about what and how to test. It was very helpful as it neatly organized and explained those standards and methods."
- LINE Plus Frontend Developer Kim Eunbin
Through this course, understand the purpose of various frontend tests and create a solid, well-crafted app. 😍
Various frontend tests
The best course to learn all at once 🚀
In this course, we will quickly and easily learn unit, integration, snapshot, visual regression, and E2E testing across Parts 1 and 2 using projects similar to real-world scenarios. You'll understand the advantages and limitations of each test type, clearly grasp the purpose of testing, and develop the capability to build your own workflow.
강의 핵심 Point!
Starting step by step from the important concepts
This explains the necessity of testing and the common testing rules and concepts that should be understood.
Even if there are concepts you're encountering for the first time
We thoroughly examine the purpose of why each tool and API is used, clearly conveying their objectives, and carefully look at the definitions of each test type and methods for selecting targets.
So that you can learn on your own
Provides examples and answers that allow you to write tests directly based on what you've learned, helping you achieve effective test-driven learning.
Similar to actual work
We provide example projects that allow you to easily apply what you've learned in real-world scenarios by writing tests based on shopping mall examples that communicate with actual server environments, helping you learn grammar and tools.
Part 1 consists of a total of five sections
📚
Section 1
Frontend Testing Preparation
- Let's examine what testing is and explore the benefits of writing test code.
- We'll examine the rules for writing proper tests when creating frontend tests.
- I'll introduce the features of the example project that we'll be using going forward.
Section 2
What is Unit Testing?
- Explains the concept and purpose of unit testing.
- This explains what should be verified when writing unit tests.
- Introduces the testing framework Vitest and writes unit tests based on example code.
- In this process, we'll examine the syntax needed for writing tests, including Matcher and Assertion, it, setup, teardown, and more.
- We'll explore Testing Library, a tool that helps with component testing.
Section 3
Writing Unit Tests
- We'll examine the criteria for selecting unit testing targets based on a shopping mall example.
- Let's explore mocking and mocking initialization methods, and examine how to write independent tests.
- We'll explore how to write tests for timers that you frequently encounter with React hooks, and examine how to effectively use the act function and React Testing Library along with important considerations.
- We examine the limitations of unit testing.
Section 4
What is Integration Testing?
- Explains the concept and purpose of integration testing.
- We'll examine the criteria for selecting integration test targets based on shopping mall examples.
- We'll explore methods for mocking state management libraries and API mocking techniques using MSW.
- We'll examine the criteria for selecting unit testing targets based on shopping mall examples.
- We'll explore how to utilize React Testing Library's asynchronous utility functions.
Section 5
Integration Testing Writing
- We'll write integration tests based on a shopping mall example.
- We'll explore the limitations of integration testing.
- We'll explore how to automate testing using GitHub Actions.
Related Courses
Frontend Testing Applied Directly to Real Work
Part 2: Advanced Testing - Visual Regression · E2E Testing
Link: https://inf.run/DRRLB
Q&A 💬
Q. Can I take the course regardless of Windows / macOS?
Yes, it's possible. The classes are conducted on macOS using VSCode and browser (Google Chrome) environments.
Q. Where can I get the learning materials?
The course materials are included in the lectures, and please refer to GitHub for example code.
Q. Is there any knowledge I should have before taking the course?
Basic knowledge of JavaScript (ES6) and React is required. Since this course focuses on testing, we provide brief introductions to project development technologies, but you'll need to learn the specific usage methods on your own. We use these technologies at a manageable level, so you can definitely succeed by learning the technologies while following along at your own pace.
Q. Can I take any section I want first, regardless of the order?
This course sequentially explains the concepts of testing, how to write each test, and their limitations, while introducing new testing methods to overcome those limitations. Therefore, we recommend learning sequentially from the earlier sections.
Q. Are Part 1 and Part 2 consecutive lectures?
Yes. The course proceeds with the same example project, and content introduced in Part 1 will not be reintroduced in Part 2. If possible, I recommend studying Part 1 and Part 2 together.
Recommended for
these people
Who is this course right for?
For those who want to gain confidence in their code through testing.
For those who want to automate repetitive manual verification through testing.
For those who have been curious about what frontend testing actually validates
For those who want to learn various types of front-end testing at once and build a seamlessly integrated workflow.
Need to know before starting?
JavaScript
CSS·HTML
리액트
1,544
Learners
90
Reviews
66
Answers
4.9
Rating
2
Courses
코드 조커
◦ 기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
◦ 12년차 프런트엔드 개발자
◦ (현) 글로벌 컨텐츠 회사 FE 개발 부문 팀장
◦ (전) NHN TOAST Cloud FE 개발 팀장
◦ (전) 삼성 SDS FE 개발자
오프
◦ 기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
◦ 8년차 프런트엔드 개발자
◦ (현) 글로벌 메신저 회사 FE 개발자
◦ (전) NHN TOAST UI 오픈소스 개발자
Curriculum
All
25 lectures ∙ (4hr 42min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
72 reviews
4.9
72 reviews
DongjaReviews 2
∙
Average Rating 5.0
5
100% enrolled테스트가 무엇인지, 무엇을 테스트할지, 어떻게 테스트 할지에 대해서 많은 분들이 고민을 하고 계실거라고 생각합니다. 이 강의를 들으면 테스트를 처음 접하시는 분들도 쉽게 따라하실 수 있을 것 같습니다. 테스트와 별개로 예제 프로젝트 세팅들을 보면서도 얻어가는 부분들이 있어서 좋았습니다 :) 좋은 강의 만들어주셔서 감사합니다! 2부도 열심히 들을게요~
- 코드 조커, 오프Instructor
강의를 잘 활용해주시는 것 같아 좋네요! 나머지 테스트 코드들도 꼭 함께 살펴보시면서 공부해보시면 더 큰 도움이 될 겁니다. 2부까지 꼭 완강하시고 실무에 적용하신 내용 공유해주신 내용도 들려주시면 좋겠네요! 새해 복 많이 받으세요~
- 프레디
Reviews 7
∙
Average Rating 5.0
- 컴공ㄷㄷ해
Reviews 2
∙
Average Rating 5.0
$59.40
hanjungv's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
