강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

Áp dụng ngay vào thực tế Kiểm thử Frontend - Phần 1. Nền tảng kiểm thử: Kiểm thử đơn vị・Kiểm thử tích hợp

Thông qua bài giảng này, bạn sẽ nắm bắt được các loại kiểm thử front-end tổng thể và học cách viết các kiểm thử đáng tin cậy bằng cách lựa chọn các kiểm thử phù hợp với tình huống.

(4.9) 72 đánh giá

956 học viên

  • hanjungv
단위테스트
통합테스트
프런트엔드
검증
Software Test
JavaScript
React
vitest

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Các khái niệm quan trọng cần thiết để viết bài kiểm tra

  • Cách viết test frontend để tăng độ tin cậy cho code bạn viết

  • Hướng dẫn viết kiểm thử đơn vị và tích hợp bằng vitest

  • Hướng dẫn sử dụng các công cụ kiểm thử như Testing Library, MSW


🎊 이벤트 🎊 

Nhận coupon giảm 30% cho Phần 1!

📌 Liên kết (77,000 -> 53,600원)

1. Làm thế nào để sử dụng coupon?Bạn có thể sử dụng coupon bằng cách nhấp vào coupon mong muốn tại [Giỏ hàng khóa học → Chọn coupon → Coupon có thể sử dụng].
2. Làm thế nào để đăng ký coupon?Coupon sẽ được phát hành khi bạn nhập mã coupon sở hữu tại [Giỏ hàng khóa học → Chọn coupon], [Dashboard → Hộp coupon].

Nếu bạn đã tham gia khóa học Phần 1, hãy nhận coupon giảm giá 50% cho Phần 2!

Chúng tôi đang chia sẻ coupon giảm giá 50% cho phần 2 dành cho những bạn đã hoàn thành tất cả các bài giảng phần 1, giúp bạn mua với giá rẻ hơn. Hãy truy cập bài viết dưới đây và sử dụng coupon trước khi mua!

📌 Bài viết link: 링크
⚠️ Bài viết này chỉ hiển thị cho người đã mua phần 1.

Chúng tôi hỗ trợ chi phí khóa học cho sinh viên và người chuẩn bị việc làm 💪

Để các bạn sinh viên không có thu nhập hoặc đang chuẩn bị việc làm bớt gánh nặng tài chính, nếu điền và gửi form thì chúng tôi sẽ tặng coupon giảm giá 50%. Nếu link đăng ký đang mở thì có thể đăng ký được. Chúng tôi ủng hộ việc học tập của các bạn. Hãy cố gắng lên! 🔥

📌 Link đăng ký: https://forms.gle/ohs7KywvSGXoJXGM7
⚠️ Chủ đề này có thể hơi khó đối với những bạn mới bắt đầu học FE. Hãy chắc chắn kiểm tra kiến thức tiên quyết trước khi tham gia khóa học!


Bạn có đang băn khoăn về những điều này không? 🤔

Tôi tò mò về
frontend test kiểm tra những gì

Việc thử nghiệm bằng tay
trực tiếp trên thiết bị
quá lặp đi lặp lại và mệt mỏi

Tôi tò mò về
kiểm thử frontend thực tế được viết
trong công việc

Học các loại test frontend khác nhau và viết test bằng cách sử dụng các ví dụ gần với trường hợp thực tế!

  • 🤔 Bạn đã quen với việc tạo ứng dụng ở một mức độ nào đó, nhưng có lo lắng liệu nó có thực sự hoạt động tốt trong môi trường production không?
  • 🤔 Mọi người đều nói rằng việc test thực sự cần thiết nhưng có quá nhiều loại test frontend khác nhau khiến bạn không dám bắt đầu phải không?
  • 🤔 Bạn có muốn xác minh và tự động hóa nhiều thứ hơn trong khi vẫn cố chấp với một loại test cụ thể không?
  • 🤔 Bạn có muốn tổng hợp về mục đích của test và loại test nào cần viết không?

Nếu bạn đang có những băn khoăn này, thì bạn đã tìm đúng chỗ rồi!
"Áp dụng ngay vào thực tế - Frontend Testing" được chúng tôi khuyến nghị cho các bạn.

Khóa học được các chuyên gia Frontend thực tế khuyến nghị!

"Đây là khóa học mà bạn có thể học được tất cả từ tính cần thiết của test code đến các khái niệm testing đa dạng và phương pháp ứng dụng. Những ai chưa quen thuộc với testing có thể nắm vững khái niệm testing thông qua khóa học, còn những ai đã từng viết test code trước đây có thể học cách viết test code hiệu quả và có ý nghĩa hơn thông qua các ví dụ và thực hành trong khóa học để áp dụng vào công việc thực tế."

- Nhà phát triển Frontend tại Kurly Yoo Kyung-sang

"Khi viết test code, có những lúc bản thân cần phải thuyết phục chính mình. 'Liệu việc test có làm trễ tiến độ phát triển không?' 'Có đúng khi test cái này không?' 'Có nên test những nội dung sẽ thay đổi sau này không?'"

Khóa học này đang cho thấy các kỹ thuật đa dạng về cách có thể kiểm thử một trang web mua sắm đơn giản một cách chiến lược. Sau khi xem hết video, tôi nghĩ bạn sẽ có thể tự tin viết code kiểm thử mà bản thân có thể thuyết phục được. Tôi hy vọng nhiều người xem video này và có được sự tự tin trong việc kiểm thử.

- Lee Sang Chul, nhà phát triển frontend tại LINE Plus

"Đây là khóa học tập trung vào những điểm cốt lõi từ lý do tại sao phải viết test code cho đến cách viết như thế nào, dựa trên các ví dụ thực tế có thể sử dụng trong công việc. Test code là phần không thể thiếu để tạo ra ứng dụng đáng tin cậy, nhưng tôi luôn băn khoăn về việc nên test cái gì và test như thế nào. Khóa học đã giúp tôi rất nhiều bằng cách sắp xếp và giải thích một cách rõ ràng các tiêu chí và phương pháp đó."

- Kim Eun Bin, nhà phát triển frontend tại LINE Plus

Thông qua khóa học này, hãy hiểu được mục đích của các loại test frontend khác nhau và tạo ra một ứng dụng hoàn thiện, vững chắc. 😍


Khóa học tốt nhất để học
nhiều loại test frontend cùng một lúc 🚀

Trong khóa học này, chúng ta sẽ học nhanh và dễ dàng về unit test, integration test, snapshot test, visual regression test, E2E test qua 2 phần bằng cách sử dụng dự án tương tự như trong thực tế. Hiểu được ưu điểm và hạn chế của từng loại test, nắm rõ mục đích của testing để có thể xây dựng workflow riêng cho bản thân.

Điểm quan trọng của bài giảng!

Từng bước một, bắt đầu từ những khái niệm quan trọng

Tầm quan trọng của việc kiểm thử và các quy tắc, khái niệm chung cần biết khi viết test sẽ được giải thích.

Ngay cả khi có những khái niệm mới lần đầu tiếp xúc

Truyền đạt rõ ràng mục đích tại sao sử dụng từng công cụ và API, đồng thời xem xét kỹ lưỡng định nghĩa của từng loại test và phương pháp lựa chọn đối tượng.

để có thể tự học và phát triển

Cung cấp các ví dụ và đáp án để bạn có thể tự viết test dựa trên nội dung đã học, hỗ trợ việc học test một cách hiệu quả.

Tương tự như thực tế công việc

Chúng tôi cung cấp dự án ví dụ để bạn có thể dễ dàng áp dụng trong thực tế bằng cách viết test dựa trên ví dụ về trang thương mại điện tử giao tiếp với môi trường server thực tế để học cú pháp và công cụ.


Phần 1 bao gồm tổng cộng năm phần
được cấu thành 📚

Phần 1
Chuẩn bị viết test Frontend

  • Tìm hiểu thử nghiệm là gì và xem xét hiệu quả khi viết mã thử nghiệm.
  • Chúng ta sẽ tìm hiểu các quy tắc để viết test đúng cách khi viết test cho frontend.
  • Giới thiệu về các tính năng của dự án mẫu sẽ được sử dụng trong tương lai.

Phần 2
Unit Test là gì?

  • Giải thích về khái niệm và mục đích của unit test.
  • Giải thích về nội dung cần được xác minh khi viết unit test.
  • Giới thiệu về framework kiểm thử Vitest và viết unit test dựa trên mã ví dụ.
  • Trong quá trình này, chúng ta sẽ tìm hiểu về các cú pháp cần thiết để viết test như Matcher và Assertion, it, setup, teardown.
  • Chúng ta sẽ tìm hiểu về Testing Library - công cụ hỗ trợ kiểm thử component.

Phần 3
Viết unit test

  • Chúng ta sẽ xem xét các tiêu chí để lựa chọn đối tượng kiểm thử đơn vị dựa trên ví dụ về trang web thương mại điện tử.
  • Tìm hiểu về Mocking và các phương pháp khởi tạo mocking, đồng thời tìm hiểu cách viết các bài test độc lập.
  • Tìm hiểu cách viết test cho timer - thứ thường xuyên gặp phải khi sử dụng React hooks, và khám phá cách sử dụng hiệu quả hàm act cùng React Testing Library cũng như những điểm cần lưu ý.
  • Chúng ta sẽ tìm hiểu về những hạn chế của unit test.

Phần 4
Kiểm thử tích hợp là gì?

  • Giải thích về khái niệm và mục đích của kiểm thử tích hợp.
  • Chúng ta sẽ xem xét các tiêu chí lựa chọn đối tượng kiểm thử tích hợp dựa trên ví dụ về trang web thương mại điện tử.
  • Chúng ta sẽ tìm hiểu về phương pháp mocking thư viện quản lý state và phương pháp mocking API sử dụng MSW.
  • Chúng ta sẽ xem xét các tiêu chí lựa chọn đối tượng kiểm thử đơn vị dựa trên ví dụ về trang web thương mại điện tử.
  • Chúng ta sẽ tìm hiểu cách sử dụng các hàm tiện ích bất đồng bộ của React Testing Library.

Phần 5
Viết kiểm thử tích hợp

  • Viết test tích hợp dựa trên ví dụ về cửa hàng trực tuyến.
  • Tìm hiểu về những hạn chế của kiểm thử tích hợp.
  • Chúng ta sẽ tìm hiểu cách tự động hóa kiểm thử bằng cách sử dụng GitHub Actions.

Khóa học liên quan

Kiểm thử Frontend áp dụng ngay vào thực tế

2부: Kiểm thử nâng cao - Kiểm thử hồi quy trực quan · Kiểm thử E2E
Link: https://inf.run/DRRLB


Q&A 💬

Q. Tôi có thể học khóa học này trên cả Windows và macOS không?

Có, điều đó hoàn toàn có thể. Khóa học được tiến hành trên macOS và sử dụng môi trường VSCode cùng với trình duyệt (Google Chrome).

Q. Tài liệu học tập có thể tải ở đâu?

Tài liệu bài giảng được bao gồm trong khóa học, và vui lòng tham khảo mã ví dụ trên GitHub.

Q. Có kiến thức nào cần biết trước khi nghe bài giảng không?

Cần có kiến thức cơ bản về JavaScript (ES6) và React. Vì khóa học này nói về testing nên sẽ giới thiệu đơn giản về các công nghệ được sử dụng trong dự án, nhưng cách sử dụng cụ thể thì bạn cần tự học. Chúng tôi sử dụng ở mức độ không quá khó nên bạn hoàn toàn có thể theo kịp nếu vừa học các công nghệ vừa làm theo từ từ.

Q. Có thể học trước các phần mong muốn mà không cần theo thứ tự không?

Khóa học này giải thích tuần tự các khái niệm về testing và cách viết từng loại test, những hạn chế của chúng, đồng thời giới thiệu các phương pháp testing mới để vượt qua những hạn chế đó. Do đó, tôi khuyến nghị bạn nên học tuần tự từ các phần trước.

Q. Phần 1 và phần 2 có phải là các bài giảng liên tiếp không?

Vâng. Khóa học sẽ tiến hành với cùng một dự án ví dụ, và nội dung đã giới thiệu ở phần 1 sẽ không được giới thiệu lại ở phần 2. Nếu có thể, tôi khuyến nghị bạn nên học cả phần 1 và phần 2 cùng nhau.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những ai muốn tự tin vào đoạn code mình viết thông qua việc kiểm thử

  • Những ai muốn tự động hóa việc kiểm chứng lặp đi lặp lại bằng tay thông qua kiểm tra.

  • Dành cho những bạn luôn tò mò về việc kiểm thử front-end thường xác minh những gì

  • Dành cho những ai muốn học nhiều loại kiểm thử frontend cùng một lúc và xây dựng quy trình làm việc phù hợp.

Cần biết trước khi bắt đầu?

  • JavaScript

  • CSS · HTML

  • React

Xin chào
Đây là

1,551

Học viên

90

Đánh giá

67

Trả lời

4.9

Xếp hạng

2

Các khóa học

코드 조커

기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
12년차 프런트엔드 개발자
(현) 글로벌 컨텐츠 회사 FE 개발 부문 팀장
(전) NHN TOAST Cloud FE 개발 팀장
(전) 삼성 SDS FE 개발자

오프

기초부터 완성까지, 프런트엔드(개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드) 저자
8년차 프런트엔드 개발자
(현) 글로벌 메신저 회사 FE 개발자
(전) NHN TOAST UI 오픈소스 개발자

Chương trình giảng dạy

Tất cả

25 bài giảng ∙ (4giờ 42phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

72 đánh giá

4.9

72 đánh giá

  • 인프런 도니님의 프로필 이미지
    인프런 도니

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    72% đã tham gia

    테스트코드 짜야지 짜야지... 생각만 하다가 정말 제대로 해보고 싶어서 강의를 듣게 되었습니다. 강의 내용도 너무 좋았고, 코드들도 제공해주셔서 테스트 코드에만 집중할 수 있어서 좋았습니다. 실무에 적용해봐도 되겠다는 용기가 생겼습니다! 감사합니다 :)

    • 코드 조커, 오프
      Giảng viên

      좋은 평가 감사합니다!! 적용하시다가 어려운 부분 있으시면 언제든지 편하게 질문 주세요!!

  • Dongja님의 프로필 이미지
    Dongja

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    테스트가 무엇인지, 무엇을 테스트할지, 어떻게 테스트 할지에 대해서 많은 분들이 고민을 하고 계실거라고 생각합니다. 이 강의를 들으면 테스트를 처음 접하시는 분들도 쉽게 따라하실 수 있을 것 같습니다. 테스트와 별개로 예제 프로젝트 세팅들을 보면서도 얻어가는 부분들이 있어서 좋았습니다 :) 좋은 강의 만들어주셔서 감사합니다! 2부도 열심히 들을게요~

    • 강의를 잘 활용해주시는 것 같아 좋네요! 나머지 테스트 코드들도 꼭 함께 살펴보시면서 공부해보시면 더 큰 도움이 될 겁니다. 2부까지 꼭 완강하시고 실무에 적용하신 내용 공유해주신 내용도 들려주시면 좋겠네요! 새해 복 많이 받으세요~

  • 프레디님의 프로필 이미지
    프레디

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    56% đã tham gia

    • 임수현님의 프로필 이미지
      임수현

      Đánh giá 5

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      실무에 바로 적용할 수 있을만큼 좋은 퀄리티의 예시코드를 통해 배울 수 있어서 너무 좋았습니다!

      • 강의에서 등장하지 않는 코드들도 꼭 함께 살펴보시면서 공부해보시면 더 큰 도움이 될 겁니다. 꼭 완강하시고 실무에 적용하신 내용 공유해주신 내용도 들려주시면 좋겠네요! 새해 복 많이 받으세요~

    • 컴공ㄷㄷ해님의 프로필 이미지
      컴공ㄷㄷ해

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      테스트 코드를 작성할 때면 스스로 납득이 필요한 순간이 있습니다. “테스트로 인해 개발 일정이 밀리진 않을까?”, “이것을 테스트하는 게 맞을까?”, “추후 변경될 내용을 테스트해야 할까?” 이 강의는 단순한 쇼핑몰 사이트를 얼마나 전략적으로 테스트할 수 있는지 다양한 기법을 들어 보여주고 있습니다. 영상을 다 보고 나면 스스로 납득 가능한 테스트 코드를 자신감 있게 작성할 수 있을 것으로 생각합니다. 많은 분이 이 영상을 보시고 테스트에 자신감을 얻으셨으면 합니다.

      1.614.287 ₫

      Khóa học khác của hanjungv

      Hãy khám phá các khóa học khác của giảng viên!

      Khóa học tương tự

      Khám phá các khóa học khác trong cùng lĩnh vực!