Skip to content

Commit 5a8d015

Browse files
feat: done part 1
1 parent 0890690 commit 5a8d015

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

content/docs/addons-test-utils.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ category: Reference
1010

1111
```javascript
1212
import ReactTestUtils from 'react-dom/test-utils'; // ES6
13-
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
13+
var ReactTestUtils = require('react-dom/test-utils'); // ES5 với npm
1414
```
1515

16-
## Overview {#overview}
16+
## Tổng quan {#overview}
1717

18-
`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react).
18+
`ReactTestUtils` giúp cho việc test các React component dễ dàng trong một framework test mà bạn tùy chọn. Ở Facebook chúng tôi dùng [Jest](https://facebook.github.io/jest/) để test JavaScript mà không tốn nhiều công sức. Giờ hãy tìm hiểu cách bắt đầu với Jest thông qua Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react).
1919

20-
> Note:
20+
> Lưu ý:
2121
>
22-
> We recommend using [React Testing Library](https://testing-library.com/react) which is designed to enable and encourage writing tests that use your components as the end users do.
22+
> Chúng tôi khuyến nghị dùng [React Testing Library](https://testing-library.com/react) được thiết kế để kích hoạt và hỗ trợ viết các test mà dùng các component của bạn như là những người dùng cuối cùng(có thể hiểu như là người dùng thực tế).
2323
>
24-
> For React versions <= 16, the [Enzyme](https://airbnb.io/enzyme/) library makes it easy to assert, manipulate, and traverse your React Components' output.
24+
> Đối với phiên bản React <= 16, thư viện [Enzyme](https://airbnb.io/enzyme/) giúp bạn dễ dàng xác nhận, sử dụng, và kiểm qua output các React Component của bạn.
2525
2626

2727

@@ -42,17 +42,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
4242
- [`renderIntoDocument()`](#renderintodocument)
4343
- [`Simulate`](#simulate)
4444

45-
## Reference {#reference}
45+
## Chức vụ {#reference}
4646

4747
### `act()` {#act}
4848

49-
To prepare a component for assertions, wrap the code rendering it and performing updates inside an `act()` call. This makes your test run closer to how React works in the browser.
49+
Để chuẩn bị một component cho các assertion(assertion chính là những method dùng để kiểm tra kết quả của đơn vị cần test có đúng với mong đợi không), cho code render cái đó và thực hiện cập nhật bên trong hàm gọi `act()`. Điều này làm cho thử nghiệm của bạn chạy gần giống hơn với cách React chạy trên browser(trình duyệt).
5050

51-
>Note
51+
>Lưu ý
5252
>
53-
>If you use `react-test-renderer`, it also provides an `act` export that behaves the same way.
53+
>Nếu bạn dùng `react-test-renderer`, nó cũng cung cấp một `act` hoạt động tương tự.
5454
55-
For example, let's say we have this `Counter` component:
55+
Ví dụ, chúng ta có một `Counter` component:
5656

5757
```js
5858
class Counter extends React.Component {
@@ -85,7 +85,7 @@ class Counter extends React.Component {
8585
}
8686
```
8787

88-
Here is how we can test it:
88+
Đây là cách mà chúng ta test :
8989

9090
```js{3,20-22,29-31}
9191
import React from 'react';
@@ -124,9 +124,9 @@ it('can render and update a counter', () => {
124124
});
125125
```
126126

127-
- Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a library like [React Testing Library](https://testing-library.com/react) to reduce the boilerplate code.
127+
- Đừng quên rằng việc điều phối các sự kiện DOM chỉ hoạt động khi vùng chứa DOM được thêm vào `document`. Bạn có thể dùng thư viện như [React Testing Library](https://testing-library.com/react) để giảm bớt code có sẵn.
128128

129-
- The [`recipes`](/docs/testing-recipes.html) document contains more details on how `act()` behaves, with examples and usage.
129+
- Document này [`recipes`](/docs/testing-recipes.html) cho biết thông tin chi tiết cách `act()` hoạt động, gồm cả ví dụ lẫn cách sử dụng.
130130

131131
* * *
132132

@@ -139,11 +139,11 @@ mockComponent(
139139
)
140140
```
141141

142-
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
142+
Sơ qua một module component mocked đến phương pháp để tăng cường nó với các method hữu ích mà cho phép nó được sử dụng như một giả lập component trong React. Thay vì render nó ra như bình thường, component sẽ trở nên đơn giản như `<div>` (hoặc là một thẻ khác nếu `mockTagName` được đặt) chứa bất kỳ children nào được cung cấp.
143143

144-
> Note:
144+
> Lưu ý:
145145
>
146-
> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
146+
> `mockComponent()` là một API kế thừa. Chúng tôi khuyên nên dùng [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) thay cho nó.
147147
148148
* * *
149149

@@ -153,7 +153,7 @@ Pass a mocked component module to this method to augment it with useful methods
153153
isElement(element)
154154
```
155155

156-
Returns `true` if `element` is any React element.
156+
Trả về `true` nếu `element` thuộc bất kỳ React element.
157157

158158
* * *
159159

0 commit comments

Comments
 (0)