Skip to content

Commit 9347b16

Browse files
fix: first part
1 parent c846702 commit 9347b16

File tree

1 file changed

+12
-16
lines changed

1 file changed

+12
-16
lines changed

content/docs/addons-test-utils.md

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 với npm
1515

1616
## Tổng quan {#overview}
1717

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).
18+
`ReactTestUtils` giúp cho việc test các component trong React dễ dàng hơn trong một test framework mà bạn tùy thích. Ở Facebook chúng tôi dùng [Jest](https://facebook.github.io/jest/) để test JavaScript một cách dễ dàng. Giờ bạn có thể tìm hiểu cách bắt đầu với Jest thông qua website này [React Tutorial](https://jestjs.io/docs/tutorial-react).
1919

2020
> Lưu ý:
2121
>
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ế).
22+
> Chúng tôi khuyến nghị dùng [React Testing Library](https://testing-library.com/react) được thiết kế để hỗ trợ viết 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-
> Đố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.
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 assert(là một xác nhận - assert - là một vị từ được kết nối với một điểm trong chương trình, luôn được đánh giá là true tại thời điểm đó trong quá trình thực thi mã), sử dụng, và kiểm qua output các React Component của bạn.
2525
2626

2727

@@ -46,11 +46,11 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 với npm
4646

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

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).
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), để code render component đó và thực hiện cập nhật bên trong hàm `act()`. Điều này giúp cho test của bạn chạy gần giống như với cách React chạy trên browser(trình duyệt) thực tế.
5050

5151
>Lưu ý
5252
>
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ự.
53+
>Nếu bạn dùng `react-test-renderer`, nó cũng cung cấp một `act` chạy tương tự.
5454
5555
Ví dụ, chúng ta có một `Counter` component:
5656

@@ -75,9 +75,9 @@ class Counter extends React.Component {
7575
render() {
7676
return (
7777
<div>
78-
<p>You clicked {this.state.count} times</p>
78+
<p>Bạn đã click {this.state.count} lần</p>
7979
<button onClick={this.handleClick}>
80-
Click me
80+
Click vào đây
8181
</button>
8282
</div>
8383
);
@@ -105,12 +105,12 @@ afterEach(() => {
105105
container = null;
106106
});
107107
108-
it('có thể render và cập nhật counter', () => {
108+
it('có thể render và cập nhật một counter', () => {
109109
// Test first render and componentDidMount
110110
act(() => {
111111
ReactDOM.render(<Counter />, container);
112112
});
113-
const button = container.querySelector('nút bấm');
113+
const button = container.querySelector('button');
114114
const label = container.querySelector('p');
115115
expect(label.textContent).toBe('Bạn click 0 lần');
116116
expect(document.title).toBe('Bạn click 0 lần');
@@ -124,7 +124,7 @@ it('có thể render và cập nhật counter', () => {
124124
});
125125
```
126126

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.
127+
- Nhớ 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) để dùng code đã có sẵn (boilerplate code).
128128

129129
- 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

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

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.
142+
Sơ qua một mocked module component, có một phương pháp để kết hợp nó với các method hữu ích mà cho phép nó được sử dụng như một component giả lập trong React. Thay vì render nó ra như bình thường, component chỉ ngắn gọn như một thẻ `<div>` (hoặc là một thẻ khác nếu `mockTagName` được đặt) chứa bất kỳ children nào trong nó.
143143

144144
> Lưu ý:
145145
>
146-
<<<<<<< HEAD
147146
> `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ó.
148-
=======
149-
> `mockComponent()` is a legacy API. We recommend using [`jest.mock()`](https://jestjs.io/docs/tutorial-react-native#mock-native-modules-using-jestmock) instead.
150-
>>>>>>> c09a44bec17617c90e7911c0c28644bef075b7e5
151147
152148
* * *
153149

@@ -157,7 +153,7 @@ Sơ qua một module component mocked đến phương pháp để tăng cường
157153
isElement(element)
158154
```
159155

160-
Trả về `true` nếu `element` thuộc bất kỳ React element.
156+
Trả về `true` nếu `element` thuộc bất kỳ element trong React.
161157

162158
* * *
163159

0 commit comments

Comments
 (0)