You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -15,42 +15,42 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
15
15
16
16
## Overview {#overview}
17
17
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`من سهولة اختبار مكوّنات React في إطار عمل الاختبار الذي تريده. يستخدم Facebook الأداة. [Jest](https://facebook.github.io/jest/)اختبار JavaScript بسهولة. تعلم كيفية البدء مع Jest عبر درس [React درس](https://jestjs.io/docs/tutorial-react) في موقع Jest..
19
19
20
-
> Note:
20
+
> ملاحظة:
21
21
>
22
-
> We recommend using [`react-testing-library`](https://git.io/react-testing-library)which is designed to enable and encourage writing tests that use your components as the end users do.
22
+
> هنالك أداة بديلة أخرى تُدعى [`react-testing-library`](https://git.io/react-testing-library)نوصي باستعمالها، إذ صُمِّمَت لتمكين وتشجيع كتابة اختبارات لاستخدامها مع مكوّناتك بينما يستخدمها المستخدم النهائي.
23
23
>
24
-
> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
> أطلقت Airbnb أداة اختبار تُدعى [Enzyme](https://airbnb.io/enzyme/), والتي تجعل من السهل التعامل مع ناتج مكوّناتك. إن قرّرت استخدام أداة اختبار أخرى مع Jest فقد تستحق تجربتها
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.
47
+
إن أردت تحضير مكون لإجراء عمليات اختبار عليه، فغلِّف الشيفرة التي تصيّره ونفِّذ التحديثات داخل الاستدعاء`act()`. يؤدي ذلك إلى تنفيذ عمليات الاختبار بشكل مشابه لكيفية عمل React في المتصفح.
48
48
49
-
>Note
49
+
>ملاحظة
50
50
>
51
-
>If you use`react-test-renderer`, it also provides an `act`export that behaves the same way.
51
+
>إن كنت تستعمل`react-test-renderer`، فإنَّها توفر التصدير `act`الذي يسلك نفس السلوك.
52
52
53
-
For example, let's say we have this `Counter`component:
53
+
على سبيل المثال، ليكن لدينا المكون `Counter`التالي:
54
54
55
55
```js
56
56
classCounterextendsReact.Component {
@@ -83,7 +83,7 @@ class Counter extends React.Component {
83
83
}
84
84
```
85
85
86
-
Here is how we can test it:
86
+
إليك كيف يمكن اختباره:
87
87
88
88
```js{3,20-22,29-31}
89
89
import React from 'react';
@@ -122,11 +122,11 @@ it('can render and update a counter', () => {
122
122
});
123
123
```
124
124
125
-
Don't forget that dispatching DOM events only works when the DOM container is added to the `document`. You can use a helper like [`react-testing-library`](https://github.com/kentcdodds/react-testing-library)to reduce the boilerplate code.
125
+
لا تنسَ أنَّ إرسال أحداث DOM يعمل عند إضافة حاوية DOM إلى `document` فقط. تستطيع استعمال مساعد مثل [`react-testing-library`](https://github.com/kentcdodds/react-testing-library)لتقليل الشيفرة المتداولة (boilerplate code).
126
126
127
127
* * *
128
128
129
-
### `mockComponent()` {#mockcomponent}
129
+
### `()mockComponent` {#mockcomponent}
130
130
131
131
```javascript
132
132
mockComponent(
@@ -135,25 +135,25 @@ mockComponent(
135
135
)
136
136
```
137
137
138
-
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.
138
+
تمرير وحدة المكوّن المحاكي إلى هذا التابع لتزويد المكوّن بتوابع مفيدة، فبدلًا من التصيير الاعتيادي سيصبح المكوّن عنصر `div` بسيط (أو أي عنصر آخر ندخله ضمن الوسيط `mockTagName`) يحتوي على أي مكوّن ابن نعطيه له.
139
139
140
-
> Note:
140
+
> ملاحظة:
141
141
>
142
-
> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/shallow-renderer.html)or[`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock)instead.
142
+
> `()mockComponent` هي واجهة برمجة تطبيق قديمة. نوصي باستخدام التصيير السطحي أو [التصيير السطحي](/docs/shallow-renderer.html)أو[`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock)بدلًا من ذلك.
143
143
144
144
* * *
145
145
146
-
### `isElement()` {#iselement}
146
+
### `()isElement` {#iselement}
147
147
148
148
```javascript
149
149
isElement(element)
150
150
```
151
151
152
-
Returns `true`if `element`is any React element.
152
+
يُعيد القيمة `true`إن كان الوسيط `element`عبارة عن عنصر React.
153
153
154
154
* * *
155
155
156
-
### `isElementOfType()` {#iselementoftype}
156
+
### `()isElementOfType` {#iselementoftype}
157
157
158
158
```javascript
159
159
isElementOfType(
@@ -162,31 +162,31 @@ isElementOfType(
162
162
)
163
163
```
164
164
165
-
Returns `true`if `element`is a React element whose type is of a React`componentClass`.
165
+
يُعيد القيمة `true`إن كان الوسيط `element`عبارة عن عنصر React نوعه هو`componentClass`.
166
166
167
167
* * *
168
168
169
-
### `isDOMComponent()` {#isdomcomponent}
169
+
### `()isDOMComponent` {#isdomcomponent}
170
170
171
171
```javascript
172
172
isDOMComponent(instance)
173
173
```
174
174
175
-
Returns `true`if `instance`is a DOM component (such as a `<div>` or `<span>`).
175
+
يُعيد القيمة `true`إن كان الوسيط `instance`هو مكوّن DOM (مثل `div` أو `span`).
Traverse all components in `tree` and accumulate all components where `test(component)` is`true`. This is not that useful on its own, but it's used as a primitive for other test utils.
211
+
التنقل عبر مكوّنات شجرة المكوّنات وجمع كل المكوّنات حيث يكون test(component) قيمته`true`. لا يكون هذا مفيدًا بحد ذاته ولكنّه يُستخدَم كبداية لأدوات اختبار أخرى.
Like [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass)but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
237
+
مثل [`()scryRenderedDOMComponentsWithClass`](#scryrendereddomcomponentswithclass) ولكن يتوقّع وجود نتيجة واحدة، ويُعيد تلك النتيجة، أو يرمي استثناء إن كان عدد المكوّنات المطابقة أكثر من واحد.
Like[`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag)but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
263
+
مثل[`()scryRenderedDOMComponentsWithTag`](#scryrendereddomcomponentswithtag), ولكن يتوقّع وجود نتيجة واحدة، ويُعيد تلك النتيجة، أو يرمي استثناء إن كان عدد المكوّنات المطابقة أكثر من واحد.
Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype)but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
289
+
مثل [`()scryRenderedComponentsWithType`](#scryrenderedcomponentswithtype)ولكن يتوقّع وجود نتيجة واحدة، ويُعيد تلك النتيجة، أو يرمي استثناء إن كان عدد المكوّنات المطابقة أكثر من واحد.
290
290
291
291
***
292
292
293
-
### `renderIntoDocument()` {#renderintodocument}
293
+
### `()renderIntoDocument` {#renderintodocument}
294
294
295
295
```javascript
296
296
renderIntoDocument(element)
297
297
```
298
298
299
-
Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to:
299
+
تصيير عنصر React في عقدة DOM منفصلة في المستند. تتطلّب هذه الدالة قابلية الوصول إلى DOM.
300
300
301
301
```js
302
302
constdomContainer=document.createElement('div');
303
303
ReactDOM.render(element, domContainer);
304
304
```
305
305
306
-
> Note:
306
+
> ملاحظة:
307
307
>
308
-
> You will need to have `window`, `window.document` and`window.document.createElement`globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work.
308
+
> تحتاج إلى أن تكون `window`، و `window.document`، و`window.document.createElement`متوفرة لديك بشكل عام (global) قبل استيراد React، وإلّا ستعتقد React أنّها لا تستطيع الوصول إلى DOM ولن تعمل توابع مثل `setState`.
309
309
310
310
* * *
311
311
312
-
## Other Utilities {#other-utilities}
312
+
## أدوات أخرى {#other-utilities}
313
313
314
314
### `Simulate` {#simulate}
315
315
@@ -320,19 +320,19 @@ Simulate.{eventName}(
320
320
)
321
321
```
322
322
323
-
Simulate an event dispatch on a DOM node with optional`eventData` event data.
323
+
محاكاة حدث في عقدة DOM مع خيار إضافي لبيانات الأحداث`eventData`.
324
324
325
-
`Simulate`has a method for [every event that React understands](/docs/events.html#supported-events).
325
+
تمتلك الأداة `Simulate`تابعًا [لكل حدث تفهمه React](/docs/events.html#supported-events).
> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you.
347
+
> يجب عليك تزويد أي خاصيّة حدث تستخدمها في مكوّنك (مثل `KeyCode`، و `Which`، إلخ...) لأنّ React لا تُنشِئ أي من هذه الخاصيّات لأجلك.
0 commit comments