Xu Hướng 5/2022 # Hướng Dẫn Viết Unit Test Trong React # Top View

Xem 2,871

Bạn đang xem bài viết Hướng Dẫn Viết Unit Test Trong React được cập nhật mới nhất ngày 17/05/2022 trên website Ezlearning.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Cho đến thời điểm hiện tại, bài viết này đã đạt được 2,871 lượt xem.

--- Bài mới hơn ---

  • Unit Test Trong C# Với Nunit Và Moq
  • Unit Testing Ứng Dụng C# Dùng .net Core Và Visual Studio Code
  • 【Hướng Dẫn】 Cách Viết Thư Upu Lần Thứ 50
  • Làm Sao Giỏi Văn, Giỏi Viết Lẫn Lách
  • Hướng Dẫn Cách Viết Văn Hay Cho Các Bạn Học Sinh Mọi Lứa Tuổi
  • Toàn bộ project để bạn tham khảo

    Tại sao phải test?

    Rất hiển nhiên là chúng ta viết test nhằm mục đích hạn chế được càng nhiều lõi càng tốt, đảm bảo những gì chúng ta viết ra chạy đúng như chúng ta mong muốn. Một vài điểm trừ khi chúng ta phải viết test

    1. Là nó tốn thời gian và tương đối khó khăn (dù là lập trình viên kinh nghiệm cũng gặp không ít vất vả khi mới bắt đầu viết test)
    2. Test pass không có nghĩa ứng dụng, function của chúng ta chạy đúng 100%
    3. Cũng đôi khi, test fail, nhưng ứng dụng, function vẫn chạy hoàn toàn bình thường
    4. Trong vài trường hợp đặc biệt, chạy test trong CI có thể tốn tiền

    Test cái gì?

    Test các chức năng, function của ứng dụng, những cái mà user sẽ sử dụng. Nó giúp chúng ta tự tin vỗ ngực, ứng dụng đáp ứng đúng nhu cầu sử dụng

    Không test cái gì

    Thích quan điểm của Kent C về việc không nên đi quá chi tiết việc hiện thực. Việc mà code nó hiện thực như thế nào chúng ta không quan tâm, user không quan tâm, chúng ta chỉ quan tâm đầu vào-đầu ra của một function.

    Các thư viện của người khác viết cũng là thứ không cần thiết phải test, nó là trách nhiệm của người viết thư viện. Nếu không tin thì đừng dùng nó. Còn nếu thật sự có tâm bạn hãy hỗ trợ cho thư viện đó trên github bằng cách bổ sung test cho nó.

    Một vài triết lý cá nhân khi test

    Nhiều integration test, không dùng snapshot test, vài unit test, vài e-to-e test.

    Hãy viết thật nhiều integration test, unit test thì tốt nhưng nó không thật sự là cách mà người dùng sử dụng ứng dụng. Việc test chi tiết code hiện thực ra sao với unit test rất dễ.

    Integration test nên dùng mock (dữ liệu giả lập) ít nhất có thể

    Không nên test những cái tiểu tiết như tên hàm, tên biến, cách khai báo biến số, hằng số có hợp lý.

    Shallow vs mount

    Mount là phần html, css, js thật sự khi chạy, như cách mà browser sẽ thấy, nhưng theo cách giả lập. Nó không có render, paint bất cứ thứ gì lên UI, nhưng làm như thể nó là browser thật sự và chạy code ngầm bên dưới.

    Không bỏ thời gian ra để paint ra UI giúp test chạy nhanh hơn. Tuy nhiên nó vẫn chưa nhanh bằng shallow render

    Đó là lý do bạn phải unmountcleanup sau mỗi test, nếu không test này sẽ gây side-effect lên test kia.

    Mount/render thường được sử dụng cho integration test và shallow sử dụng cho unit test.

    Kiểu shallow render sẽ chỉ render ra một component đang test mà không bao gồm các component con, như vậy để tách biệt việc test trên từng component độc lập.

    Lấy ví dụ như component cha, con như sau

    Nếu chúng ta dùng shallow render component App, chúng ta sẽ nhận được DOM như sau, phần ChildComponent sẽ không bao gồm bộ “ruột” bên trong

    Với mount, thì chúng ta có

    react-testing-library là một thư viện khá ổn cho việc viết unit test react, tuy nhiên Enzyme là nền tảng cần nắm chắc, chúng ta sẽ đề cập nó trước

    Enzyme

    Cài đặt

    npm install enzyme enzyme-to-json enzyme-adapter-react-16

    Sơ qua những gì chúng ta sẽ import

    3 cái import đầu tiên là cho React và component đang test, sau đó đến phần của Enzyme, toJson là để chuyển shallow component của chúng ta ra thành JSON để lưu thành snapshot

    Cuối cùng là Adapter để làm việc được với react 16

    Thực hiện test chi tiết với Enzyme

    Trong component trên, chúng ta cố tình gõ sai chữ incremen, ứng dụng sẽ không chạy, nhưng khi chạy test thì vẫn pass

    File test

    Thứ nhất là cách viết test như vậy có vấn đề, chúng ko mô phỏng cách mà user sẽ sử dụng, chúng ta gọi thẳng increment().

    Vậy người nông dân biết phải làm sao?

    React-testing-library

    Từ thư viện react-testing-library, nó đưa ra một nguyên lý chung như sau

    Test càng gần với thực tế sử dụng của ứng dụng, test càng đem đến sự tự tin cho chúng ta

    Hãy tâm niệm nguyên lý này trong đầu, chúng ta sẽ còn bàn tiếp về nó

    useState

    Hay bắt đầu test React hook, chúng ta đã và đang sử dụng nó nhiều hơn là class component

    Prop sẽ được nhận từ component cha là App

    Với nguyên lý như đã nói, chúng ta sẽ thực hiện test như thế nào

    Thực hiện việc test

    Vì không sử dụng shallow render, nên chúng ta phải gọi afterEach(cleanup) để dọn dẹp sau mỗi lực thực hiện test

    getByText là phương thức nằm trong hàm render, còn vài kiểu query khác nữa, nhưng đây là kiểu mà chúng ta dùng nó nhiều nhất, có thể nói là đủ dùng.

    useReducer

    Reducer chúng ta sẽ test

    Action

    Cuối cùng là component sử dụng action và reducer đã định nghĩa

    Component này sẽ đổi giá trị của stateprop từ false sang true bằng việc dispatch một SUCCESS action

    Thực hiện test

    Trước tiên chúng ta test cái reducer bên trong khối describe, thực hiện một test đơn giản với giá trị initial state và sau khi có action success.

    Với ví dụ trên, reducer và action rất chi là đơn giản, bạn có thể nói không cần thực hiện unit test cho nó làm gì, nhưng trong thực tế sử dụng reducer sẽ không hề đơn giản thế, và việc test reducer là thực sự cần thiết, không những vậy, chúng ta còn phải test theo hướng chi tiết hiện thực bên trong.

    useContext

    Giờ chúng ta đi đến việc test một component con có thể cập nhập context state trong component cha.

    Thường thì context sẽ được khởi tạo trong một file riêng

    Chúng ta sẽ cần một component cha, nắm giữ Context provider. Giá trị truyền vào cho provider sẽ là giá trị state và hàm setState

    Component con, đây là component chúng ta muốn test

    Lưu ý: các giá trị của state, khởi tạo, cập nhập điều nằm trong App.js, chúng ta chỉ truyền giá trị này xuống các component con thông qua context, mọi thứ điều thực hiện ở App, cái này quan trọng cần nhớ để hiểu lúc test

    Với context chúng ta cũng không hề thay đổi cách làm như với useState, vẫn là tìm và đặt expect thông qua kết quả nhận được cuối cùng.

    Tại sao lại như vậy?

    How to Test React Components: the Complete Guide

    --- Bài cũ hơn ---

  • Hướng Dẫn Viết Unit Test Trong Angular
  • Unit Test Là Gì? 10 Frameworks Unit Test Cho Javascript
  • Tìm Hiểu Về Jestjs, Viết Unit Test Cho Javascript
  • Viết Unit Test Cho Javascript Với Jasmine
  • Tải Manualslib User Guides Owners Manuals Library Cho Máy Tính Pc Windows Phiên Bản
  • Cập nhật thông tin chi tiết về Hướng Dẫn Viết Unit Test Trong React trên website Ezlearning.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!

  • Web hay
  • Links hay
  • Guest-posts
  • Push
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100