Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Done Translating-reference-test-renderer.md #48

Merged
merged 1 commit into from Mar 26, 2019
Merged

Done Translating-reference-test-renderer.md #48

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
104 changes: 51 additions & 53 deletions content/docs/reference-test-renderer.md
View file
Open in desktop
Expand Up @@ -6,20 +6,20 @@ layout: docs
category: Reference
---

**Importing**
**الاستيراد**

```javascript
import TestRenderer from 'react-test-renderer'; // ES6
const TestRenderer = require('react-test-renderer'); // ES5 with npm
```

## Overview {#overview}
## لمحة عامة {#overview}

This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
تُزوّدنا هذه الحزمة بمُصيِّر React يُمكِن استخدامه لتصيير مكوّنات React إلى كائنات JavaScript نقيّة بدون الاعتماد على DOM أو بيئة الهاتف المحمول الأصليّة.

Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or [jsdom](https://github.com/tmpvar/jsdom).
تُسهِّل هذه الحزمة بشكل أساسي من أخذ صورة حول التسلسل الهرمي للمكوّنات (مشابه لشجرة DOM) والتي يُصيّرها React DOM أو React Native بدون استخدام المتصفح أو [jsdom](https://github.com/tmpvar/jsdom).

Example:
مثال:

```javascript
import TestRenderer from 'react-test-renderer';
Expand All @@ -38,9 +38,9 @@ console.log(testRenderer.toJSON());
// children: [ 'Facebook' ] }
```

You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
نستطيع استخدام ميزة الاختبار بالتقاط الصورة الموجودة في Jest لحفظ نسخة عن شجرة JSON بشكل تلقائي إلى ملف والتحقق في اختباراتك من أنّها لم تتغيّر. [تعلّم المزيد حول ذلك](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).

You can also traverse the output to find specific nodes and make assertions about them.
بإمكانك أيضًا التنقل في الناتج لإيجاد عقد محددة:

```javascript
import TestRenderer from 'react-test-renderer';
Expand Down Expand Up @@ -69,182 +69,180 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);

### TestRenderer {#testrenderer}

* [`TestRenderer.create()`](#testrenderercreate)
* [`()TestRenderer.create`](#testrenderercreate)

### TestRenderer instance {#testrenderer-instance}

* [`testRenderer.toJSON()`](#testrenderertojson)
* [`testRenderer.toTree()`](#testrenderertotree)
* [`testRenderer.update()`](#testrendererupdate)
* [`testRenderer.unmount()`](#testrendererunmount)
* [`testRenderer.getInstance()`](#testrenderergetinstance)
* [`()testRenderer.toJSON`](#testrenderertojson)
* [`()testRenderer.toTree`](#testrenderertotree)
* [`()testRenderer.update`](#testrendererupdate)
* [`()testRenderer.unmount`](#testrendererunmount)
* [`()testRenderer.getInstance`](#testrenderergetinstance)
* [`testRenderer.root`](#testrendererroot)

### TestInstance {#testinstance}

* [`testInstance.find()`](#testinstancefind)
* [`testInstance.findByType()`](#testinstancefindbytype)
* [`testInstance.findByProps()`](#testinstancefindbyprops)
* [`testInstance.findAll()`](#testinstancefindall)
* [`testInstance.findAllByType()`](#testinstancefindallbytype)
* [`testInstance.findAllByProps()`](#testinstancefindallbyprops)
* [`()testInstance.find`](#testinstancefind)
* [`()testInstance.findByType`](#testinstancefindbytype)
* [`()testInstance.findByProps`](#testinstancefindbyprops)
* [`()testInstance.findAll`](#testinstancefindall)
* [`()testInstance.findAllByType`](#testinstancefindallbytype)
* [`()testInstance.findAllByProps`](#testinstancefindallbyprops)
* [`testInstance.instance`](#testinstanceinstance)
* [`testInstance.type`](#testinstancetype)
* [`testInstance.props`](#testinstanceprops)
* [`testInstance.parent`](#testinstanceparent)
* [`testInstance.children`](#testinstancechildren)

## Reference {#reference}
## مرجع {#reference}

### `TestRenderer.create()` {#testrenderercreate}
### `()TestRenderer.create` {#testrenderercreate}

```javascript
TestRenderer.create(element, options);
```

Create a `TestRenderer` instance with the passed React element. It doesn't use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. The returned instance has the following methods and properties.
إنشاء نسخة من `TestRenderer` مع عنصر React المُمرَّر. لا يستخدم هذا التابع DOM الحقيقي ولكنّه يُصيِّر بشكل كامل شجرة المكوّنات في الذاكرة. تملك النسخة المُعادة التوابع والخاصيّات التالية.

### `testRenderer.toJSON()` {#testrenderertojson}
### `()testRenderer.toJSON` {#testrenderertojson}

```javascript
testRenderer.toJSON()
```

Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
ن يُمثِّل الشجرة المُصيَّرة. تحتوي هذه الشجرة على عُقَد خاصّة بالمنصّة مثل `<div>` ن يُمثِّل الشجرة المُصيَّرة. تحتوي هذه الشجرة على عُقَد خاصّة بالمنصّة مثل `<View>` وخاصيّاتها، ولكنّه لا يحتوي على مكوّنات مكتوبة من قبل المستخدم. يُفيد هذا لأجل[اختبار اللقطات (snapshot testing)](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).

### `testRenderer.toTree()` {#testrenderertotree}
### `()testRenderer.toTree` {#testrenderertotree}

```javascript
testRenderer.toTree()
```

Return an object representing the rendered tree. Unlike `toJSON()`, the representation is more detailed than the one provided by `toJSON()`, and includes the user-written components. You probably don't need this method unless you're writing your own assertion library on top of the test renderer.
يُعيد كائن يُمثِّل الشجرة المُصيَّرة. وعلى النقيض من التابع `toJSON()`‎ يكون التمثيل أكثر تفصيلًا ويتضمّن المكوّنات المكتوبة من قبل المستخدم. لن تحتاج هذا التابع غالبًا إلّا إذا كنت تكتب مكتبتك الخاصّة بناءً على مُصيِّر الاختبار.

### `testRenderer.update()` {#testrendererupdate}
### `()testRenderer.update` {#testrendererupdate}

```javascript
testRenderer.update(element)
```

Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.
يُعيد تصيير الشجرة في الذاكرة مع عنصر جذري جديد. يُحاكي هذا تحديث React الذي يطرأ على العنصر الجذري. إن كان للعنصر الجديد نفس النوع والمفتاح للعنصر السابق فستُحدَّث الشجرة، وفيما عدا ذلك سيُعيد وصل شجرة جديدة.

### `testRenderer.unmount()` {#testrendererunmount}
### `()testRenderer.unmount` {#testrendererunmount}

```javascript
testRenderer.unmount()
```

Unmount the in-memory tree, triggering the appropriate lifecycle events.
يفصل الشجرة الموجودة في الذاكرة، وبذلك يُطلِق أحداث دورة الحياة المناسبة.

### `testRenderer.getInstance()` {#testrenderergetinstance}
### `()testRenderer.getInstance` {#testrenderergetinstance}

```javascript
testRenderer.getInstance()
```

Return the instance corresponding to the root element, if available. This will not work if the root element is a function component because they don't have instances.
يُعيد النسخة الموافقة للعنصر الجذري إن كانت موجودة. لن يعمل هذا التابع إن كان العنصر الجذري عبارة عن مكوّن دالة لأنّها لا تمتلك نُسَخًا مثل مكوّنات الأصناف.

### `testRenderer.root` {#testrendererroot}

```javascript
testRenderer.root
```

Returns the root "test instance" object that is useful for making assertions about specific nodes in the tree. You can use it to find other "test instances" deeper below.
يُعيد نسخة الاختبار للكائن الجذري والتي تفيد في إجراء استعلامات حول عقد مُحدَّدة في شجرة المكوّنات. بإمكانك استخدامه لإيجاد نُسَخ الاختبار الأخرى الموجودة في مستويات أدنى من الشجرة.

### `testInstance.find()` {#testinstancefind}
### `()testInstance.find` {#testinstancefind}

```javascript
testInstance.find(test)
```

Find a single descendant test instance for which `test(testInstance)` returns `true`. If `test(testInstance)` does not return `true` for exactly one test instance, it will throw an error.
إيجاد نسخة الاختبار الوحيدة المنحدرة التي يُعيد فيها التابع `test(testInstance)‎` القيمة `true`. إن كان التابع `test(testInstance)‎`‎ لا يُعيد القيمة `true` لنسخة اختبار وحيدة بالضبط فسيرمي هذا التابع خطأً.

### `testInstance.findByType()` {#testinstancefindbytype}
### `()testInstance.findByType` {#testinstancefindbytype}

```javascript
testInstance.findByType(type)
```

Find a single descendant test instance with the provided `type`. If there is not exactly one test instance with the provided `type`, it will throw an error.
إيجاد نسخة اختبار وحيدة منحدرة من النوع المُعطى ضمن الوسيط `type`. إن لم يكن هنالك بالضبط نسخة اختبار وحيدة فسيرمي هذا التابع خطأً.

### `testInstance.findByProps()` {#testinstancefindbyprops}
### `()testInstance.findByProps` {#testinstancefindbyprops}

```javascript
testInstance.findByProps(props)
```

Find a single descendant test instance with the provided `props`. If there is not exactly one test instance with the provided `props`, it will throw an error.
إيجاد نسخة اختبار وحيدة منحدرة التي تمتلك الخاصيّات المُزوَّدة عن طريق الوسيط `props`. إن لم يكن هنالك بالضبط نسخة اختبار وحيدة تمتلك الخاصيّات المطلوبة فسيرمي هذا التابع خطأً.

### `testInstance.findAll()` {#testinstancefindall}
### `()testInstance.findAll` {#testinstancefindall}

```javascript
testInstance.findAll(test)
```

Find all descendant test instances for which `test(testInstance)` returns `true`.
إيجاد جميع نسخ الاختبار المنحدرة والتي يُعيد فيها التابع `test(testInstance)` القيمة `true`.

### `testInstance.findAllByType()` {#testinstancefindallbytype}
### `()testInstance.findAllByType` {#testinstancefindallbytype}

```javascript
testInstance.findAllByType(type)
```

Find all descendant test instances with the provided `type`.
إيجاد جميع نسخ الاختبار المنحدرة التي تمتلك النوع `type`.

### `testInstance.findAllByProps()` {#testinstancefindallbyprops}

```javascript
testInstance.findAllByProps(props)
```

Find all descendant test instances with the provided `props`.
إيجاد جميع نسخ الاختبار المنحدرة التي تمتلك الخاصيّات `props`.

### `testInstance.instance` {#testinstanceinstance}

```javascript
testInstance.instance
```

The component instance corresponding to this test instance. It is only available for class components, as function components don't have instances. It matches the `this` value inside the given component.
نسخة المكوّن المطابقة لنسخة الاختبار هذه. متوفّر فقط من أجل مكوّنات الأصناف، بسبب عدم امتلاك مكوّنات الدوال للنسخ. يُطابِق قيمة `this` بداخل المكوّن المُعطى.

### `testInstance.type` {#testinstancetype}

```javascript
testInstance.type
```

The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`.
نوع المكوّن المُطابِق لنسخة الاختبار هذه. على سبيل المثال يمتلك المكوّن `<Button />` النوع `Button`.

### `testInstance.props` {#testinstanceprops}

```javascript
testInstance.props
```

The props corresponding to this test instance. For example, a `<Button size="small" />` component has `{size: 'small'}` as props.
الخاصيّات المطابقة لنسخة الاختبار هذه. على سبيل المثال يمتلك المكوّن `<Button size="small" />` الخاصيّة `{size: 'small'}` as props.

### `testInstance.parent` {#testinstanceparent}

```javascript
testInstance.parent
```

The parent test instance of this test instance.
نسخة الاختبار الأب لنسخة الاختبار هذه.

### `testInstance.children` {#testinstancechildren}

```javascript
testInstance.children
```

The children test instances of this test instance.
نسخة الاختبار الابن لنسخة الاختبار هذه.

## Ideas {#ideas}
## بعض الأفكار {#ideas}

You can pass `createNodeMock` function to `TestRenderer.create` as the option, which allows for custom mock refs.
`createNodeMock` accepts the current element and should return a mock ref object.
This is useful when you test a component that relies on refs.
بإمكانك تمرير الدالة `createNodeMock` إلى التابع `TestRenderer.create` كخيار، والذي يسمح بالمراجع المخصصة للمحاكاة. يقبل `createNodeMock` العنصر الحالي ويجب أن يُعيد كائن مرجع محاكي. يفيد هذا عند اختبار المكوّنات التي تعتمد على المراجع:

```javascript
import TestRenderer from 'react-test-renderer';
Expand Down