강의

N
챌린지

멘토링

N
클립

커뮤니티

NEW
Programming

/

Web Development

Essential Frontend Testing You Can Use Right Away

I always had the question, 'Why on earth do we need to do frontend testing?' And with that doubt in mind, I mechanically wrote tests. But you will learn 'why we write tests' and 'how to write them according to different situations'.

3 learners are taking this course

  • simplecoding
실습 중심
초보
알기쉬운설명
Jest
playwright
react-testing-library
unit-test
e2e

What you will gain after the course

  • You'll be able to start frontend testing that once seemed overwhelming.

  • You will be able to apply testing in real-world situations.


[Essential Frontend Testing You Can Use Right Away]

Test...? Why on earth are we doing this...?



🤔 Have you ever had these concerns?

Through this course, you will solve all these problems and be able to write test code with confidence!

🤷‍♂️ "Testing... Why do we need to do this?"

You can just visually check if the code works properly, so I don't understand why you need to spend time writing more code for testing.


😱 "The tests suddenly became complicated!"

When using state management libraries like Context API and React Query, I get stuck right from setting up the test environment.

🤦‍♀️ "I don't know where or how to start..."

I don't know how to write test code at all, so it's difficult to even start a single line. 😢_😭


😳 "I can't fix the tests that AI wrote."

While AI assistance was received, the inability to understand the code makes modifications impossible, ultimately rendering it useless.



✅ Curriculum focused on practical core skills

This course doesn't simply list grammar rules. Through a curriculum composed "primarily of things actually used in practice", you'll learn only the core knowledge that can be immediately applied in real-world work.

💡 Let's be clear about why we're doing this first!

Component testing clearly contributes to project stability and development and QA speed, and we start with a clear understanding of this.

스크린샷 2025-12-02 오전 10.30.52

Test Introduction Lecture Example

🚀 Easy Foundation Building (Jest & React Testing Library)

  • Learn the basic syntax of the Jest framework very slowly, and you'll discover that test code isn't as difficult as you might think.

  • Learn the fundamental principles of writing tests based on the most practical React Testing Library (RTL).


스크린샷 2025-12-02 오전 10.35.19

Basic Usage of Testing Lecture Example

🛠️ Master Key Practical Examples Perfectly

Learn how to write tests that can be immediately applied through various practical examples

  • Testing User Interactions with the Input Component

  • Testing the Logic of the Login Component

  • Testing Business Logic in Custom Hooks

스크린샷 2025-12-02 오전 10.43.27

Login Component Test Lecture Example

🧩 Know-how for Handling Complex Situations (Context, React Query, etc.)

Learn practical know-how for setting up test environments and writing code in complex environments such as Context API or React Query. (Mocking, Provider setup, etc.)

스크린샷 2025-12-02 오전 10.46.26

# Testing Components with React Query - Lecture Example ## Introduction Hello everyone! Today we'll learn how to test React components that use React Query. React Query is a powerful library for managing server state, but it requires special setup when writing tests. Let's explore how to handle this step by step. ## Basic Setup First, let's look at a simple component that uses React Query: ```jsx // UserProfile.jsx import { useQuery } from '@tanstack/react-query'; function UserProfile({ userId }) { const { data, isLoading

🌐 Complete Testing Pipeline with MSW and Playwright

  • Using MSW, build test and development environments faster and more conveniently without actual API calls.

  • Playwright automatically tests the entire scenario following the user's actual usage flow to ensure final stability.


스크린샷 2025-12-02 오전 10.50.46

Playwright Tasting Course Example

⚠️ Notes Before Taking the Course

Practice Environment

  • A Node.js environment is required.

  • The instructor's operating system is MacOS, but Windows users are also welcome.


Prerequisites and Important Notes

  • Basic React knowledge is required. (state, components, context, etc.)

  • Basic knowledge of Next.js App Router is required, but understanding the file-based routing system is sufficient.


Learning Materials

  • The course materials will be provided via a Notion link in the second lecture.

Recommended for
these people

Who is this course right for?

  • Junior Developers Who Can't Even Get Started with Test Code

  • # Developers Who Don't Understand Why They Should Write Test Code

Need to know before starting?

  • Basic knowledge of Javascript, Typescript, React, and Next.js is required.

  • Next.js just requires you to know that routing is done on a per-file basis.

Hello
This is

2,426

Learners

154

Reviews

1

Answers

4.9

Rating

3

Courses

Curriculum

All

31 lectures ∙ (6hr 51min)

Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Limited time deal

$23,100.00

30%

$26.40

simplecoding's other courses

Check out other courses by the instructor!

쉬운 용어로 배우는 Git & Github 첫걸음 - 협업까지 마스터하기강의 썸네일

쉬운 용어로 배우는 Git & Github 첫걸음 - 협업까지 마스터하기

심플코딩

쉬운 용어와 자세한 그림으로 배우는 Git과 Github 강의입니다. 복잡한 개념을 쉬운 용어로 풀어내고, 실제 협업 프로젝트에 적용하는 방법까지 배워보세요.

입문

입문

Git, GitHub

쉬운 용어로 배우는 Git & Github 첫걸음 - 협업까지 마스터하기강의 썸네일

쉬운 용어로 배우는 Git & Github 첫걸음 - 협업까지 마스터하기

심플코딩

떠먹여주는 리액트 기초 course1강의 썸네일

떠먹여주는 리액트 기초 course1

심플코딩

그림으로 배우며 리액트의 기초 개념을 명확하게 이해할 수 있는 강의

입문

입문

React, react.js, frontend

떠먹여주는 리액트 기초 course1강의 썸네일

떠먹여주는 리액트 기초 course1

심플코딩

Similar courses

Explore other courses in the same field!

실전 프론트엔드 테스트 시작하기강의 썸네일

실전 프론트엔드 테스트 시작하기

장기효(캡틴판교)

능력 있는 프론트엔드 개발 실무자가 되고 싶다면 꼭 들어야 할 테스트 강의. 테스팅 입문부터 실전까지 한방에 끝낸다 👊

초급

초급

소프트웨어 테스트, Cypress, e2e

실전 프론트엔드 테스트 시작하기강의 썸네일

실전 프론트엔드 테스트 시작하기

장기효(캡틴판교)

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트강의 썸네일

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

코드 조커, 오프

이 강의를 통해 전반적인 프런트엔드 테스트 종류를 파악하고, 상황에 맞는 적절한 테스트 선택을 통해 신뢰감 있는 테스트를 작성하는 방법을 배웁니다.

초급

초급

소프트웨어 테스트, JavaScript, e2e

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트강의 썸네일

실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트

코드 조커, 오프

2시간으로 끝내는 프론트엔드 테스트 기본기강의 썸네일

2시간으로 끝내는 프론트엔드 테스트 기본기

강병진

테스트코드! 어디서부터 시작해야할지 막막한 분들을 위해 준비했어요. 테스트 작성부터, 자동화를 통한 배포까지 한번에!

초급

초급

React, Cypress, Jest

2시간으로 끝내는 프론트엔드 테스트 기본기강의 썸네일

2시간으로 끝내는 프론트엔드 테스트 기본기

강병진

Playwright 기초 - 기초적인 활용법과 핵심 원리강의 썸네일

Playwright 기초 - 기초적인 활용법과 핵심 원리

duckyoung lee

E2E테스트 프레임워크인 Playwright의 기초적인 활용법과 핵심 원리를 다룹니다.

입문

입문

e2e, 소프트웨어 테스트, playwright

Playwright 기초 - 기초적인 활용법과 핵심 원리강의 썸네일

Playwright 기초 - 기초적인 활용법과 핵심 원리

duckyoung lee

따라하며 배우는 TDD 개발 [2023.11 업데이트]강의 썸네일

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

이 강의를 통해서 테스트 주도 개발(TDD)을 이용하여 Node.js 어플리케이션을 만들어 봅니다.

초급

초급

TDD, Node.js, Express

따라하며 배우는 TDD 개발 [2023.11 업데이트]강의 썸네일

따라하며 배우는 TDD 개발 [2023.11 업데이트]

John Ahn

테스트 with Jest: 제로초에게 제대로 배우기강의 썸네일

테스트 with Jest: 제로초에게 제대로 배우기

제로초(조현영)

본 강의에서는 테스트가 필요한 경우와 테스트를 할 때의 장점을 Jest 프레임워크를 통해 보여드립니다. 리액트, Express 등에 유닛테스트, 통합테스트를 적용해봅니다.

초급

초급

소프트웨어 테스트, Jest, react-testing-library

테스트 with Jest: 제로초에게 제대로 배우기강의 썸네일

테스트 with Jest: 제로초에게 제대로 배우기

제로초(조현영)