Black Lives Matter. Support the Equal Justice Initiative.
React
v16.13.1 LanguagesGitHub

Test Renderer

Cara Import

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

Ikhtisar

Package ini menyediakan renderer React yang dapat digunakan untuk me-render komponen React menjadi objek JavaScript murni, tanpa bergantung pada DOM atau bahasa native pada telepon seluler.

Pada dasarnya, package ini memberi kemudahan untuk mengambil snapshot dari hierarki tampilan platform (mirip dengan pohon DOM) yang di-render oleh React DOM atau komponen React Native tanpa menggunakan browser atau jsdom.

Contoh:

import TestRenderer from 'react-test-renderer';

function Link(props) {
  return <a href={props.page}>{props.children}</a>;
}

const testRenderer = TestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(testRenderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

Anda dapat menggunakan fitur snapshot testing dari Jest untuk menyimpan salinan pohon JSON ke file secara otomatis dan melakukan pengecekan di tes Anda terhadap adanya perubahan (struktur): Pelajari lebih lanjut.

Anda juga dapat melintasi ke bagian keluaran untuk menemukan node tertentu dan membuat perbandingan terhadap node-node tersebut.

import TestRenderer from 'react-test-renderer';

function MyComponent() {
  return (
    <div>
      <SubComponent foo="bar" />
      <p className="my">Halo</p>
    </div>
  )
}

function SubComponent() {
  return (
    <p className="sub">Sub</p>
  );
}

const testRenderer = TestRenderer.create(<MyComponent />);
const testInstance = testRenderer.root;

expect(testInstance.findByType(SubComponent).props.foo).toBe('bar');
expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);

TestRenderer

TestRenderer instance

TestInstance

Referensi

TestRenderer.create() 

TestRenderer.create(element, options);

Membuat instance TestRenderer dengan mengoper elemen React. Fungsi ini tidak menggunakan DOM asli, tetapi masih sepenuhnya me-render diagram komponen ke dalam memori sehingga Anda masih dapat membandingkannya. Mengembalikan sebuah instance TestRenderer.

TestRenderer.act() 

TestRenderer.act(callback);

Mirip seperti fungsi pembantu act() dari react-dom/test-utils, TestRenderer.act menyiapkan komponen untuk dibandingkan. Gunakan versi act() ini untuk membungkus panggilan ke TestRenderer.create dan testRenderer.update.

import {create, act} from 'react-test-renderer';
import App from './app.js'; // Komponen yang akan dites

// merender komponen
let root; 
act(() => {
  root = create(<App value={1}/>)
});

// membuat perbandingan dengan root 
expect(root.toJSON()).toMatchSnapshot();

// memperbarui dengan prop berbeda
act(() => {
  root.update(<App value={2}/>);
})

// membuat perbandingan dengan root 
expect(root.toJSON()).toMatchSnapshot();

testRenderer.toJSON() 

testRenderer.toJSON()

Menghasilkan objek yang merepresentasikan pohon yang telah di-render. Pohon ini hanya berisi node pada platform spesifik seperti <div> atau <View> dan beserta props-nya, tetapi tidak mengandung komponen yang dibuat oleh pengguna. Hal ini berguna untuk snapshot testing.

testRenderer.toTree() 

testRenderer.toTree()

Menghasilkan objek yang merepresentasikan pohon yang telah di-render. Tidak seperti toJSON (), representasinya lebih detail daripada yang dihasilkan oleh toJSON (), dan termasuk komponen yang dibuat pengguna. Anda mungkin tidak memerlukan method ini kecuali Anda sedang membuat library perbandingan sendiri di atas test renderer.

testRenderer.update() 

testRenderer.update(element)

Me-render ulang pohon dalam memori dengan elemen root baru. Hal Ini mensimulasikan pembaruan React di root. Jika elemen baru memiliki tipe dan key yang sama dengan elemen sebelumnya, struktur pohon akan diperbarui; jika tidak, akan memasang ulang pohon yang baru.

testRenderer.unmount() 

testRenderer.unmount()

Melepas pohon dalam memori, memicu siklus hidup event yang sesuai.

testRenderer.getInstance() 

testRenderer.getInstance()

Menghasilkan instance yang sesuai dengan elemen root, jika tersedia. Hal ini tidak akan berfungsi jika elemen root adalah function component, karena function component tidak memiliki instance.

testRenderer.root 

testRenderer.root

Menghasilkan objek root ”test instance” yang berguna untuk membuat pernyataan tentang node tertentu di pohon. Anda dapat menggunakannya untuk menemukan ”test instance” lainnya secara lebih dalam di bawah ini.

testInstance.find() 

testInstance.find(test)

Menemukan turunan tunggal test instance yang mana test(testInstance) menghasilkan nilai true. Jika test(testInstance) tidak menghasilkan nilai true untuk satu test instance, fungsi ini akan melemparkan error.

testInstance.findByType() 

testInstance.findByType(type)

Menemukan turunan tunggal dari test instance berdasarkan type yang disediakan. Jika tidak ada satupun test instance dengan type yang disediakan, fungsi ini akan melemparkan error.

testInstance.findByProps() 

testInstance.findByProps(props)

Menemukan turunan tunggal dari test instance berdasarkan props yang disediakan. Jika tidak ada satupun test instance dengan props yang disediakan, fungsi ini akan melemparkan error.

testInstance.findAll() 

testInstance.findAll(test)

Menemukan semua turunan test instance dimana test(testInstance) menghasilkan nilai true.

testInstance.findAllByType() 

testInstance.findAllByType(type)

Menemukan semua turunan dari test instance berdasarkan type yang disediakan.

testInstance.findAllByProps() 

testInstance.findAllByProps(props)

Menemukan semua turunan dari test instance berdasarkan props yang disediakan.

testInstance.instance 

testInstance.instance

Instance komponen bersangkutan dari test instance ini. Hanya tersedia untuk class component, karena function component tidak memiliki instance. Bernilai sama dengan nilai this di dalam komponen yang diberikan.

testInstance.type 

testInstance.type

Jenis dari komponen di dalam test instance. Sebagai contoh, komponen <Button /> memiliki tipe Button.

testInstance.props 

testInstance.props

Props dari komponen di dalam test instance. Sebagai contoh, komponen <Button size="small" /> memiliki {size: 'small'} sebagai props.

testInstance.parent 

testInstance.parent

Test instance induk dari test instance ini.

testInstance.children 

testInstance.children

Test instance anak dari test instance ini.

Gagasan

Anda dapat mengoper fungsi createNodeMock ke TestRenderer.create sebagai opsi, yang memungkinkan Anda untuk membuat mock refs buatan. createNodeMock menerima elemen saat ini dan harus menghasilkan sebuah objek mock ref. Hal Ini berguna ketika Anda menguji sebuah komponen yang bergantung pada refs.

import TestRenderer from 'react-test-renderer';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.input = null;
  }
  componentDidMount() {
    this.input.focus();
  }
  render() {
    return <input type="text" ref={el => this.input = el} />
  }
}

let focused = false;
TestRenderer.create(
  <MyComponent />,
  {
    createNodeMock: (element) => {
      if (element.type === 'input') {
        // tiruan dari fungsi focus
        return {
          focus: () => {
            focused = true;
          }
        };
      }
      return null;
    }
  }
);
expect(focused).toBe(true);
Is this page useful?Edit halaman ini