강의

멘토링

커뮤니티

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'.

(5.0) 5 reviews

35 learners

Level Basic

Course period Unlimited

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

Reviews from Early Learners

Reviews from Early Learners

5.0

5.0

yjcoyjco

32% enrolled

I was completely lost when it came to test code, but this course explains everything step by step in a way that's so easy to understand! I've been seeing test code quite often in job requirements and preferred qualifications. By watching the lectures and practicing along, you'll get comfortable with it, and once you actually use it in real projects, it'll boost your job competitiveness too.

5.0

hg354323

100% enrolled

It was great that it was easy to understand. It was helpful that you covered React Query and custom hooks together in the lecture examples, and I think I can apply them directly to actual projects. Overall, the explanations were easy to follow, so I was able to keep up until the end. Thank you for the great lecture!

5.0

fabiola

35% enrolled

I didn't realize the importance of test code. After experiencing it in actual work, there are more human errors than I thought... I also missed a lot of things... So I desperately felt the importance of test code, and this lecture was a great help as it allowed me to try it out easily and comfortably. It was so good that you got straight to the point and taught only the core essentials without beating around the bush!

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.

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).


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

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.)

# 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.


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,618

Learners

176

Reviews

1

Answers

4.9

Rating

3

Courses

Curriculum

All

31 lectures ∙ (6hr 52min)

Published: 
Last updated: 

Reviews

All

5 reviews

5.0

5 reviews

  • yjcoyjco님의 프로필 이미지
    yjcoyjco

    Reviews 3

    Average Rating 5.0

    5

    32% enrolled

    I was completely lost when it came to test code, but this course explains everything step by step in a way that's so easy to understand! I've been seeing test code quite often in job requirements and preferred qualifications. By watching the lectures and practicing along, you'll get comfortable with it, and once you actually use it in real projects, it'll boost your job competitiveness too.

    • hg354323님의 프로필 이미지
      hg354323

      Reviews 1

      Average Rating 5.0

      Edited

      5

      100% enrolled

      It was great that it was easy to understand. It was helpful that you covered React Query and custom hooks together in the lecture examples, and I think I can apply them directly to actual projects. Overall, the explanations were easy to follow, so I was able to keep up until the end. Thank you for the great lecture!

      • minjun232213193님의 프로필 이미지
        minjun232213193

        Reviews 1

        Average Rating 5.0

        5

        32% enrolled

        • pabiola211237님의 프로필 이미지
          pabiola211237

          Reviews 2

          Average Rating 5.0

          5

          35% enrolled

          I didn't realize the importance of test code. After experiencing it in actual work, there are more human errors than I thought... I also missed a lot of things... So I desperately felt the importance of test code, and this lecture was a great help as it allowed me to try it out easily and comfortably. It was so good that you got straight to the point and taught only the core essentials without beating around the bush!

          • suk39521116700님의 프로필 이미지
            suk39521116700

            Reviews 2

            Average Rating 5.0

            Edited

            5

            100% enrolled

            I couldn't write a single line of test code before, but now I've gotten to work with MSW and even Playwright. Instead of just explaining theory, showing it with practical examples makes it so much easier to understand. I highly recommend this to junior developers like me!!

            $26.40

            simplecoding's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!