Utilitas Tes

Cara Import

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

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.

act()
mockComponent()
isElement()
isElementOfType()
isDOMComponent()
isCompositeComponent()
isCompositeComponentWithType()
findAllInRenderedTree()
scryRenderedDOMComponentsWithClass()
findRenderedDOMComponentWithClass()
scryRenderedDOMComponentsWithTag()
findRenderedDOMComponentWithTag()
scryRenderedComponentsWithType()
findRenderedComponentWithType()
renderIntoDocument()
Simulate

Referensi

`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 Counter 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/client';
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.createRoot(container).render(<Counter />);  });  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 bahwa mengirim event DOM hanya dapat dilakukan ketika penampung DOM sudah ditambahkan ke document. Anda dapat menggunakan library seperti react-testing-library untuk mengurangi kode boilerplate.
Dokumen recipes berisi lebih detil mengenai cara kerja act(), lengkap dengan contoh dan cara penggunaan.

`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 jest.mock().

`isElement()`

isElement(element)

Mengembalikan true jika element adalah sebuah React elemen.

`isElementOfType()`

isElementOfType(
  element,
  componentClass
)

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

`isDOMComponent()`

isDOMComponent(instance)

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

`isCompositeComponent()`

isCompositeComponent(instance)

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

`isCompositeComponentWithType()`

isCompositeComponentWithType(
  instance,
  componentClass
)

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

`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(
  tree,
  className
)

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

`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(
  tree,
  tagName
)

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

`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(
  tree,
  componentClass
)

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

`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(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.createRoot(domContainer).render(element);

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

`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.

Is this page useful?Edit halaman ini