Skip to content
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
81 changes: 41 additions & 40 deletions content/docs/reference-test-renderer.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@ layout: docs
category: Reference
---

**Importing**
**İdxal Etmə**

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

## Overview {#overview}
## İcmal {#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.
Bu paket, React komponentlərini Javascript obyektlərinə render etmək üçün, DOM və ya nativ mobil mühitindən asılı olmayan React renderer-i təmin edir.

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).
Bu paket, React DOM və ya React Native komponentinin, brauzer və ya [jsdom](https://github.com/tmpvar/jsdom) olmadan render etdiyi platforma görünüş iyerarxiyasının snəpşotunu asan formada çəkməyə imkan yaradır.

Example:
Məsələn:

```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://jestjs.io/docs/en/snapshot-testing).
JSON ağacının kopiyasını yadda saxlayıb testlərdə bu ağacın dəyişdiyini yoxlamaq üçün Jest-in snəpşot test xüsusiyyətindən istifadə edə bilərsiniz. [Əlavə məlumat üçün bura baxın](https://jestjs.io/docs/en/snapshot-testing).

You can also traverse the output to find specific nodes and make assertions about them.
Həmçinin siz nəticənin üzərindən keçib lazım olan nodları tapa bilər və bu nodlar üzərində iddialarınızı yoxlaya bilərsiniz.

```javascript
import TestRenderer from 'react-test-renderer';
Expand All @@ -49,7 +49,7 @@ function MyComponent() {
return (
<div>
<SubComponent foo="bar" />
<p className="my">Hello</p>
<p className="my">Salam</p>
</div>
)
}
Expand All @@ -72,7 +72,7 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
* [`TestRenderer.create()`](#testrenderercreate)
* [`TestRenderer.act()`](#testrendereract)

### TestRenderer instance {#testrenderer-instance}
### TestRenderer instansiyası {#testrenderer-instance}

* [`testRenderer.toJSON()`](#testrenderertojson)
* [`testRenderer.toTree()`](#testrenderertotree)
Expand All @@ -95,43 +95,44 @@ expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
* [`testInstance.parent`](#testinstanceparent)
* [`testInstance.children`](#testinstancechildren)

## Reference {#reference}
## Arayış {#reference}

### `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. Returns a [TestRenderer instance](#testrenderer-instance).
Göndərilən React elementi ilə `TestRenderer` instansiyası yaradın. Bunun real DOM-dan istifadə etməməsinə baxmayaraq, iddialarımızı yoxlaya bilmək üçün komponent ağacı yenə də bütünlüklə yaddaşa render edilir. Qaytarılan instansiyanın funksiya və parametrləri aşağıda göstərilib.

### `TestRenderer.act()` {#testrendereract}

```javascript
TestRenderer.act(callback);
```

Similar to the [`act()` helper from `react-dom/test-utils`](/docs/test-utils.html#act), `TestRenderer.act` prepares a component for assertions. Use this version of `act()` to wrap calls to `TestRenderer.create` and `testRenderer.update`.
`TestRenderer.act`, [`react-dom/test-utils`-də olan `act()` köməkçisi kimi](/docs/test-utils.html#act) iddialarınızı yoxlamaq üçün komponentləri hazırlayır. `act()`-in bu versiyasını `TestRenderer.create` `testRenderer.update` çağırışlarını əhatə etmək üçün işlədin.

```javascript
import {create, act} from 'react-test-renderer';
import App from './app.js'; // The component being tested
import App from './app.js'; // Test edilən komponent

// render the component
// komponenti render et
let root;
act(() => {
root = create(<App value={1}/>)
});

// make assertions on root

// ana komponentin üzərində iddaları yoxlayın
expect(root.toJSON()).toMatchSnapshot();

// update with some different props
// fərqli proplar ilə yeniləyin
act(() => {
root = root.update(<App value={2}/>);
})

// make assertions on root
// ana komponentin üzərində iddaları yoxlayın
expect(root.toJSON()).toMatchSnapshot();
```

Expand All @@ -141,141 +142,141 @@ expect(root.toJSON()).toMatchSnapshot();
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).
Render edilmiş ağacı təmsil edən obyekti qaytarır. Render edilmiş ağac yalnız `<div>` və ya `<View>` kimi platform-spesifik nodlardan ibarətdir. Bu ağacda istifadəçi tərəfindən yaranmış komponentlər olmur. [Snəpşot testi üçün](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) faydalıdır.

### `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.
Render edilmiş ağacı təmsil edən obyekti qaytarır. `toJSON()`-dan fərqli olaraq bu funksiya istifadəçi tərəfindən yaranmış komponentləri də obyektə daxil edir. Siz test renderer üzərində öz test kitabxananızı yazmırsınızsa, bu funksiya sizə lazım deyil.

### `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.
Yaddaşda olan ağacı yeni ana elementi ilə yenidən render edin. Bu funksiya React-in ana komponentdə yenilənməsini simulyasiya edir. Əgər yeni elementin tipi və açarı keçmiş elementinki ilə eynidirsə ağac yenilənəcək. Əks halda yeni ağac mount olunacaq.

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

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

Unmount the in-memory tree, triggering the appropriate lifecycle events.
Yaddaşda olan ağacı unmount edib uyğun lifecycle hadisələrini çağırın.

### `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.
Əgər mümkündürsə, ana elementin instansiyasını qaytarın. Əgər ana element funksiya komponentidirsə bu funksiya işləməyəcək. Çünki funksiya komponentlərinin instansiyaları olmur.

### `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.
Ağacda olan spesifik nodlar haqqında iddiaları yaratmaq üçün faydalı olan ana "test instansiya" obyektini qaytarın. Siz bu instansiya ilə dərində olan digər "test instansiyalarını" tapa bilərsiniz.

### `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` qaytaran tək test instansiyasını tapın. Əgər `test(testInstance)` yalnız tək instansiya üçün `true` qaytarmırsa bu funksiya istisna atacaq.

### `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.
Təmin edilən `type` ilə tək test instansiyasını tapın. Əgər təmin edilən `type` ilə yalnız tək instansiya yoxdursa bu funksiya istisna atacaq.

### `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.
Təmin edilən `props` ilə tək test instansiyasını tapın. Əgər təmin edilən `props` ilə yalnız tək instansiya yoxdursa, bu funksiya istisna atacaq.

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

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

Find all descendant test instances for which `test(testInstance)` returns `true`.
`test(testInstance)` `true` qaytaran bütün test instansiyalarını tapın.

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

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

Find all descendant test instances with the provided `type`.
Təmin edilən `type` ilə bütün test instansiyalarını tapın.

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

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

Find all descendant test instances with the provided `props`.
Təmin edilən `props` ilə bütün test instansiyalarını tapın.

### `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.
Göstərilən test instansiyasına uyğun olan komponent. Funksiya komponentlərinin instansiyaları olmadığından bu yalnız klas komponentləri üçün mövcuddur. Verilən komponentin `this` dəyəri ilə uyğundur.

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

```javascript
testInstance.type
```

The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`.
Test instansiyasının komponent tipi. Məsələn, `<Button />` komponentinin tipi `Button`-dır.

### `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.
Test instansiyasına uyğun gələn proplar. Məsələn, `<Button size="small" />` komponentinin `{size: 'small'}` propları var.

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

```javascript
testInstance.parent
```

The parent test instance of this test instance.
Test instansiyasının ana test instansiyası.

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

```javascript
testInstance.children
```

The children test instances of this test instance.
Test instansiyasının uşaq test instansiyaları.

## Ideas {#ideas}
## İdeyalar {#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.
Xüsusi mok refləri düzəltmək üçün `TestRenderer.create`-ə `createNodeMock` funksiyasını göndərə bilərsiniz.
`createNodeMock` cari elementi qəbul edir və mok ref obyekti qaytarır.
Bu ref-lərdən asılı olan komponentləri test etmək üçün faydalıdır.

```javascript
import TestRenderer from 'react-test-renderer';
Expand All @@ -299,7 +300,7 @@ TestRenderer.create(
{
createNodeMock: (element) => {
if (element.type === 'input') {
// mock a focus function
// fokus funksiyasını mok edin
return {
focus: () => {
focused = true;
Expand Down