Skip to content

Latest commit

 

History

History
350 lines (258 loc) · 9.99 KB

addons-test-utils.md

File metadata and controls

350 lines (258 loc) · 9.99 KB
Raw
id title permalink layout category
test-utils
Utilitas Tes
docs/test-utils.html
docs
Reference

Cara Import

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

Ikhtisar {#ikhtisar}

ReactTestUtils mempermudah kita melakukan tes pada komponen React dengan framework tes pilihan anda. Di Facebook kami menggunakan Jest untuk tes JavaScript yang tidak merepotkan. Belajar cara mulai menggunakan Jest melalui situs Jest React Tutorial.

Catatan:

Kami menyarankan Anda untuk menggunakan react-testing-library yang didesain untuk memfasilitasi dan mendorong penulisan tes yang menggunakan komponen anda selayaknya seorang pengguna sebenarnya.

Pilihan lain, Airbnb telah merilis utilitas tes bernama Enzyme, yang mempermudah kita dalam menyatakan, memanipulasi, dan melewati keluaran dari komponen React anda.

Referensi {#referensi}

act() {#act}

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.

Catatan

Jika Anda menggunakan react-test-renderer, react-test-renderer juga menyediakan sebuah act ekspor yang sama.

Sebagai contoh, katakanlah kita punya Counter komponen:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `Anda menekan sebanyak ${this.state.count} kali`;
  }
  componentDidUpdate() {
    document.title = `Anda menekan sebanyak ${this.state.count} kali`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>Anda telah menekan sebanyak {this.state.count} kali</p>
        <button onClick={this.handleClick}>
          Tekan aku
        </button>
      </div>
    );
  }
}

Ini adalah contoh bagaimana kita bisa menguji komponen ini:

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

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('Anda menekan sebanyak 0 kali');
  expect(document.title).toBe('Anda menekan sebanyak 0 kali');

  // Uji render kedua dan componentDidUpdate
  act(() => {
    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  });
  expect(label.textContent).toBe('Anda menekan sebanyak 1 kali');
  expect(document.title).toBe('Anda menekan sebanyak 1 kali');
});

Jangan lupa dalam mengirim perihal DOM hanya dapat dilakukan ketika penampung DOM sudah ditambahkan ke document. Anda dapat menggunakan penunjang seperti react-testing-library untuk mengurangi kode boilerplate.

mockComponent() {#mockcomponent}

mockComponent(
  componentClass,
  [mockTagName]
)

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.

Catatan:

mockComponent() adalah sebuah API peninggalan. Kami menyarankan Anda menggunakan shallow rendering atau jest.mock().

isElement() {#iselement}

isElement(element)

Mengembalikan true jika element adalah sebuah React elemen.

isElementOfType() {#iselementoftype}

isElementOfType(
  element,
  componentClass
)

Mengembalikan true jika element adalah sebuah React elemen yang memiliki tipe dari React componentClass.

isDOMComponent() {#isdomcomponent}

isDOMComponent(instance)

Mengembalikan true jika instance adalah sebuah komponen DOM (seperti sebuah <div> atau <span>).

isCompositeComponent() {#iscompositecomponent}

isCompositeComponent(instance)

Mengembalikan true jika instance adalah sebuah komponen yang ditetapkan oleh pengguna, seperti sebuah kelas atau sebuah fungsi.

isCompositeComponentWithType() {#iscompositecomponentwithtype}

isCompositeComponentWithType(
  instance,
  componentClass
)

Mengembalikan true jika instance adalah sebuah komponen yang memiliki tipe dari React componentClass.

findAllInRenderedTree() {#findallinrenderedtree}

findAllInRenderedTree(
  tree,
  test
)

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.

scryRenderedDOMComponentsWithClass() {#scryrendereddomcomponentswithclass}

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

Mencari semua DOM elemen dalam rendered tree yang merupakan komponen DOM yang memiliki nama kelas sama dengan className.

findRenderedDOMComponentWithClass() {#findrendereddomcomponentwithclass}

findRenderedDOMComponentWithClass(
  tree,
  className
)

Seperti scryRenderedDOMComponentsWithClass() tetapi mengharapkan satu hasil dan mengembalikan satu hasil tersebut atau melempar exception jika ada lebih dari satu yang cocok.

scryRenderedDOMComponentsWithTag() {#scryrendereddomcomponentswithtag}

scryRenderedDOMComponentsWithTag(
  tree,
  tagName
)

Mencari semua DOM elemen dalam rendered tree yang merupakan komponen DOM dengan nama label yang sama dengan tagName.

findRenderedDOMComponentWithTag() {#findrendereddomcomponentwithtag}

findRenderedDOMComponentWithTag(
  tree,
  tagName
)

Seperti scryRenderedDOMComponentsWithTag() tetapi mengharapkan satu hasil dan mengembalikan satu hasil tersebut atau melempar exception jika ada lebih dari satu yang cocok.

scryRenderedComponentsWithType() {#scryrenderedcomponentswithtype}

scryRenderedComponentsWithType(
  tree,
  componentClass
)

Mencari semua instansi dari komponen dengan tipe yang sama dengan componentClass.

findRenderedComponentWithType() {#findrenderedcomponentwithtype}

findRenderedComponentWithType(
  tree,
  componentClass
)

Sama seperti scryRenderedComponentsWithType() tetapi mengharapkan satu hasil dan mengembalikan satu hasil tersebut atau melempar exception jika ada lebih dari satu yang cocok.

renderIntoDocument() {#renderintodocument}

renderIntoDocument(element)

Menggambar sebuah elemen React ke dalam sebuah DOM node terpisah dalam document. Fungsi ini membutuhkan sebuah DOM. Secara efektif hal ini sama dengan:

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

Catatan:

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.

Other Utilities {#other-utilities}

Simulate {#simulate}

Simulate.{eventName}(
  element,
  [eventData]
)

Mensimulasikan pengiriman sebuah perihal pada suatu DOM node dengan pilihan eventData event data.

Simulate memiliki sebuah method untuk every event that React understands.

Klik sebuah elemen

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

Mengubah nilai dari sebuah bidang masukan lalu menekan ENTER.

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

Catatan

Anda harus menyediakan event properti yang Anda gunakan dalam komponen (contoh keyCode, which, dll...) karena React tidak membuat event tersebut untuk Anda.