Skip to content

feat/translate docs/testing.md #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 15, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 26 additions & 17 deletions content/docs/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,43 @@ redirect_from:
next: testing-recipes.html
---

You can test React components similar to testing other JavaScript code.
Bạn có thể test các React components tương tự như việc test những code Javascript khác.

There are a few ways to test React components. Broadly, they divide into two categories:
Có một số cách để testing các React component. Nói chung, chúng được chia thành 2 loại như sau:

* **Rendering component trees** in a simplified test environment and asserting on their output.
* **Running a complete app** in a realistic browser environment (also known as “end-to-end” tests).
* **Rendering những cây component** trong một môi trường test được đơn giản hóa và khẳng định trên kết quả đầu ra của chúng.
* **Chạy một ứng dụng hoàn chỉnh** trong một môi trường trình duyệt thực tế (hay còn được gọi là “end-to-end” tests).

This documentation section focuses on testing strategies for the first case. While full end-to-end tests can be very useful to prevent regressions to important workflows, such tests are not concerned with React components in particular, and are out of the scope of this section.
Phần tài liệu này tập trung vào chiến lược testing cho trường hợp đầu tiên. Mặc dù các end-to-end tests đầy đủ có thể rất hữu ích để ngăn ngừa sự hồi quy
đối với những luồng làm việc quan trọng, nhưng các tests đó không liên quan đến các React component nói chung, và nằm ngoài phạm vi của phần này.

### Tradeoffs {#tradeoffs}
### Những đánh đổi {#tradeoffs}


When choosing testing tools, it is worth considering a few tradeoffs:
Khi lựa chọn những công cụ kiểm tra, cần cân nhắc một số đánh đổi sau:

* **Iteration speed vs Realistic environment:** Some tools offer a very quick feedback loop between making a change and seeing the result, but don't model the browser behavior precisely. Other tools might use a real browser environment, but reduce the iteration speed and are flakier on a continuous integration server.
* **How much to mock:** With components, the distinction between a "unit" and "integration" test can be blurry. If you're testing a form, should its test also test the buttons inside of it? Or should a button component have its own test suite? Should refactoring a button ever break the form test?
* **Tốc độ lặp lại so với với môi trường thực tế:** Một số công cụ cung cấp một vòng lặp phản hồi rất nhanh giữa việc thực hiện một thay đổi và xem xét kết quả,
nhưng không mô hình hóa chính xác hành vi của trình duyệt. Các công cụ khác có thể sử dụng một môi trường trình duyệt thực tế, nhưng lại giảm tốc độ lặp lại và dễ
bị phá vỡ hơn trên một máy chủ tích hợp liên tục.
* **Mô phỏng bao nhiêu:** Với các components, sự khác biệt giữa một "đơn vị" test và "tập hợp" test có thể bị lu mờ. Nếu bạn đang thử nghiệm trên một
form, liệu việc kiểm tra nó có nên kiểm tra luôn các button bên trong nó hay không? Hoặc một button component có nên có cho nó một bộ test riêng hay không? Liệu việc
tái cấu trúc một button có làm phá vỡ form test?

Different answers may work for different teams and products.
Những câu trả lời khác nhau có thể phù hợp cho những team và những sản phẩm khác nhau.

### Recommended Tools {#tools}
### Những công cụ được đề xuất {#tools}

**[Jest](https://facebook.github.io/jest/)** is a JavaScript test runner that lets you access the DOM via [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking [modules](/docs/testing-environments.html#mocking-modules) and [timers](/docs/testing-environments.html#mocking-timers) so you can have more control over how the code executes.
**[Jest](https://facebook.github.io/jest/)** là một trình chạy thử nghiệm cho phép bạn truy cập vào DOM thông qua [`jsdom`](/docs/testing-environments.html#mocking-a-rendering-surface). Trong đó jsdom chỉ là một ước tính về cách mà trình duyệt hoạt động, nó thường đủ tốt để kiểm tra React components. Jest cung cấp
một tốc độ lặp lại tuyệt vời kết hợp với các tính năng mạnh mẽ như [modules](/docs/testing-environments.html#mocking-modules) mô phỏng (mocking) và một [timers](/docs/testing-environments.html#mocking-timers) cho phép bạn có thể kiểm soát nhiều hơn cách mà một mã code được thực thi.

**[React Testing Library](https://testing-library.com/react)** is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn't provide a way to "shallowly" render a component without its children, a test runner like Jest lets you do this by [mocking](/docs/testing-recipes.html#mocking-modules).
**[React Testing Library](https://testing-library.com/react)** là tập hợp các trình trợ giúp cho phép bạn test React components mà không cần dựa vào các chi tiết triển
khai của họ. Cách tiếp cận này giúp cho việc tái cấu trúc trở nên một cách dễ dàng và cũng thúc đẩy bạn hướng tới các phương pháp tiếp cận hay nhất về khả năng
truy cập. Mặc dù nó không cung câp một cách "shallowly" (nông cạn - đối lập với deep) đối với render một component mà không có thành phần con của nó, một test thử nghiệm
như Jest cho phép bạn làm điều này thông qua [mocking](/docs/testing-recipes.html#mocking-modules)(mô phỏng).

### Learn More {#learn-more}
### Tìm hiểu thêm {#learn-more}

This section is divided in two pages:
Phần này được chia làm hai trang:

- [Recipes](/docs/testing-recipes.html): Common patterns when writing tests for React components.
- [Environments](/docs/testing-environments.html): What to consider when setting up a testing environment for React components.
- [Recipes](/docs/testing-recipes.html): Các patterns thường gặp khi viết các tests cho React components.
- [Environments](/docs/testing-environments.html): Những điều cần cân nhắc khi thiết lập môi trường testing cho React components.