Skip to content

Commit

Permalink
Translate Test Utilities Page (#16)
Browse files Browse the repository at this point in the history
  • Loading branch information
Lukereonal authored and regalius committed Mar 3, 2019
1 parent b74cb23 commit 4547fd1
Showing 1 changed file with 52 additions and 51 deletions.
103 changes: 52 additions & 51 deletions content/docs/addons-test-utils.md
@@ -1,27 +1,27 @@
---
id: test-utils
title: Test Utilities
title: Utilitas Tes
permalink: docs/test-utils.html
layout: docs
category: Reference
---

**Importing**
**Cara Import**

```javascript
import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
var ReactTestUtils = require('react-dom/test-utils'); // ES5 dengan npm
```

## Overview {#overview}
## Ikhtisar {#ikhtisar}

`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).
`ReactTestUtils` mempermudah kita melakukan tes pada komponen React dengan _framework_ tes pilihan anda. Di Facebook kami menggunakan [Jest](https://facebook.github.io/jest/) untuk tes JavaScript yang tidak merepotkan. Belajar cara mulai menggunakan Jest melalui situs Jest [React Tutorial](https://jestjs.io/docs/tutorial-react).

> Note:
> Catatan:
>
> 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.
> Kami menyarankan Anda untuk menggunakan [`react-testing-library`](https://git.io/react-testing-library) yang didesain untuk memfasilitasi dan mendorong penulisan tes yang menggunakan komponen anda selayaknya seorang pengguna sebenarnya.
>
> 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.
> Pilihan lain, Airbnb telah merilis utilitas tes bernama [Enzyme](https://airbnb.io/enzyme/), yang mempermudah kita dalam menyatakan, memanipulasi, dan melewati keluaran dari komponen React anda.
- [`act()`](#act)
- [`mockComponent()`](#mockcomponent)
Expand All @@ -40,17 +40,17 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
- [`renderIntoDocument()`](#renderintodocument)
- [`Simulate`](#simulate)

## Reference {#reference}
## Referensi {#referensi}

### `act()` {#act}

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.
Untuk menyiapkan komponen sebelum penegasan, bungkus kode yang me-*render* komponen tersebut dan lakukan pembaruan di dalam panggilan `act()`. Hal ini membuat tes anda berjalan menyerupai bagaimana React bekerja di peramban.

>Note
>Catatan
>
>If you use `react-test-renderer`, it also provides an `act` export that behaves the same way.
>Jika Anda menggunakan `react-test-renderer`, `react-test-renderer` juga menyediakan sebuah `act` ekspor yang sama.
For example, let's say we have this `Counter` component:
Sebagai contoh, katakanlah kita punya `Counter` komponen:

```js
class App extends React.Component {
Expand All @@ -60,10 +60,10 @@ class App extends React.Component {
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
document.title = `Anda menekan sebanyak ${this.state.count} kali`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
document.title = `Anda menekan sebanyak ${this.state.count} kali`;
}
handleClick() {
this.setState(state => ({
Expand All @@ -73,17 +73,17 @@ class App extends React.Component {
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<p>Anda telah menekan sebanyak {this.state.count} kali</p>
<button onClick={this.handleClick}>
Click me
Tekan aku
</button>
</div>
);
}
}
```

Here is how we can test it:
Ini adalah contoh bagaimana kita bisa menguji komponen ini:

```js{3,20-22,29-31}
import React from 'react';
Expand All @@ -103,26 +103,26 @@ afterEach(() => {
container = null;
});
it('can render and update a counter', () => {
// Test first render and componentDidMount
it('bisa render dan memperbarui counter', () => {
// Uji render pertama dan componentDidMount
act(() => {
ReactDOM.render(<Counter />, container);
});
const button = container.querySelector('button');
const label = container.querySelector('p');
expect(label.textContent).toBe('You clicked 0 times');
expect(document.title).toBe('You clicked 0 times');
expect(label.textContent).toBe('Anda menekan sebanyak 0 kali');
expect(document.title).toBe('Anda menekan sebanyak 0 kali');
// Test second render and componentDidUpdate
// Uji render kedua dan componentDidUpdate
act(() => {
button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
});
expect(label.textContent).toBe('You clicked 1 times');
expect(document.title).toBe('You clicked 1 times');
expect(label.textContent).toBe('Anda menekan sebanyak 1 kali');
expect(document.title).toBe('Anda menekan sebanyak 1 kali');
});
```

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.
Jangan lupa dalam mengirim perihal DOM hanya dapat dilakukan ketika penampung DOM sudah ditambahkan ke `document`. Anda dapat menggunakan penunjang seperti [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) untuk mengurangi kode _boilerplate_.

* * *

Expand All @@ -135,11 +135,12 @@ mockComponent(
)
```

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.
Oper sebuah komponen tiruan ke _method_ ini untuk menambahkan _method-method_ berguna yang memperbolehkan komponen tersebut untuk digunakan sebagai komponen React tiruan. Sebagai ganti dari _rendering_ seperti biasa, komponen tiruan ini akan menjadi `<div>` sederhana (atau tag lain jika `mockTagName` disediakan) yang menampung anak komponen yang disediakan.

> Note:
> Catatan:
>
> `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.
> `mockComponent()` adalah sebuah API peninggalan. Kami menyarankan Anda menggunakan [shallow rendering](/docs/shallow-renderer.html) atau [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock).
* * *

Expand All @@ -149,7 +150,7 @@ Pass a mocked component module to this method to augment it with useful methods
isElement(element)
```

Returns `true` if `element` is any React element.
Mengembalikan `true` jika `element` adalah sebuah React elemen.

* * *

Expand All @@ -162,7 +163,7 @@ isElementOfType(
)
```

Returns `true` if `element` is a React element whose type is of a React `componentClass`.
Mengembalikan `true` jika `element` adalah sebuah React elemen yang memiliki tipe dari React `componentClass`.

* * *

Expand All @@ -172,7 +173,7 @@ Returns `true` if `element` is a React element whose type is of a React `compone
isDOMComponent(instance)
```

Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
Mengembalikan `true` jika `instance` adalah sebuah komponen DOM (seperti sebuah `<div>` atau `<span>`).

* * *

Expand All @@ -182,7 +183,7 @@ Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
isCompositeComponent(instance)
```

Returns `true` if `instance` is a user-defined component, such as a class or a function.
Mengembalikan `true` jika `instance` adalah sebuah komponen yang ditetapkan oleh pengguna, seperti sebuah kelas atau sebuah fungsi.

* * *

Expand All @@ -195,7 +196,7 @@ isCompositeComponentWithType(
)
```

Returns `true` if `instance` is a component whose type is of a React `componentClass`.
Mengembalikan `true` jika `instance` adalah sebuah komponen yang memiliki tipe dari React `componentClass`.

* * *

Expand All @@ -208,7 +209,7 @@ findAllInRenderedTree(
)
```

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.
Melewati semua komponen dalam `tree` dan mengumpulkan semua komponen yang `test(component)` adalah `true`. Ini tidak begitu bermanfaat dengan dirinya sendiri, tetapi digunakan sebagai primitif untuk alat uji lainnya.

* * *

Expand All @@ -221,7 +222,7 @@ scryRenderedDOMComponentsWithClass(
)
```

Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`.
Mencari semua DOM elemen dalam _rendered tree_ yang merupakan komponen DOM yang memiliki nama kelas sama dengan `className`.

* * *

Expand All @@ -234,7 +235,7 @@ findRenderedDOMComponentWithClass(
)
```

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.
Seperti [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) tetapi mengharapkan satu hasil dan mengembalikan satu hasil tersebut atau melempar _exception_ jika ada lebih dari satu yang cocok.

* * *

Expand All @@ -247,7 +248,7 @@ scryRenderedDOMComponentsWithTag(
)
```

Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`.
Mencari semua DOM elemen dalam _rendered tree_ yang merupakan komponen DOM dengan nama label yang sama dengan `tagName`.

* * *

Expand All @@ -260,7 +261,7 @@ findRenderedDOMComponentWithTag(
)
```

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.
Seperti [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) tetapi mengharapkan satu hasil dan mengembalikan satu hasil tersebut atau melempar _exception_ jika ada lebih dari satu yang cocok.

* * *

Expand All @@ -273,7 +274,7 @@ scryRenderedComponentsWithType(
)
```

Finds all instances of components with type equal to `componentClass`.
Mencari semua instansi dari komponen dengan tipe yang sama dengan `componentClass`.

* * *

Expand All @@ -286,7 +287,7 @@ findRenderedComponentWithType(
)
```

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.
Sama seperti [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) tetapi mengharapkan satu hasil dan mengembalikan satu hasil tersebut atau melempar _exception_ jika ada lebih dari satu yang cocok.

***

Expand All @@ -296,16 +297,16 @@ Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) bu
renderIntoDocument(element)
```

Render a React element into a detached DOM node in the document. **This function requires a DOM.** It is effectively equivalent to:
Menggambar sebuah elemen React ke dalam sebuah DOM _node_ terpisah dalam _document_. **Fungsi ini membutuhkan sebuah DOM.** Secara efektif hal ini sama dengan:

```js
const domContainer = document.createElement('div');
ReactDOM.render(element, domContainer);
```

> Note:
> Catatan:
>
> 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.
> Anda harus memiliki `window`, `window.document` dan `window.document.createElement` tersedia secara global **sebelum** Anda import `React`. Jika tidak React akan berpikir tidak dapat mengakses DOM dan _method-method_ seperti `setState` tidak akan bekerja.
* * *

Expand All @@ -320,30 +321,30 @@ Simulate.{eventName}(
)
```

Simulate an event dispatch on a DOM node with optional `eventData` event data.
Mensimulasikan pengiriman sebuah perihal pada suatu DOM _node_ dengan pilihan `eventData` _event_ data.

`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
`Simulate` memiliki sebuah _method_ untuk [every event that React understands](/docs/events.html#supported-events).

**Clicking an element**
**Klik sebuah elemen**

```javascript
// <button ref={(node) => this.button = node}>...</button>
const node = this.button;
ReactTestUtils.Simulate.click(node);
```

**Changing the value of an input field and then pressing ENTER.**
**Mengubah nilai dari sebuah bidang masukan lalu menekan ENTER.**

```javascript
// <input ref={(node) => this.textInput = node} />
const node = this.textInput;
node.value = 'giraffe';
node.value = 'jerapah';
ReactTestUtils.Simulate.change(node);
ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
```

> Note
> Catatan
>
> 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.
> Anda harus menyediakan _event_ properti yang Anda gunakan dalam komponen (contoh keyCode, which, dll...) karena React tidak membuat _event_ tersebut untuk Anda.
* * *

0 comments on commit 4547fd1

Please sign in to comment.