Test Utilities

Импорт хийх

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

Тойм

Таны сонгосон тест хийх framework-т React-ын компонентуудыг шалгах ажлыг ReactTestUtils хялбарчилж өгдөг. Facebook-т бид Jest ашиглан зовлон багатайгаар JavaScript-ыг тест хийдэг. Jest-ын вэбсайт дээр React Tutorial гэсэн хэсгээс мэдээлэл аваарай.

Тэмдэглэл:

React Testing Library-ыг ашиглахыг бид танд зөвлөж байна. Учир нь таны компонентууд эцсийн хэрэглэгчид ямар байх вэ гэдгийг шалгах тест бичих боломжийг танд олгоно.

Airbnb компани Enzyme нэртэй тест хийх үйлчилгээ гаргасан. Энэ нь React компонентын үр дүнг баталгаажуулах, ашиглах, шилжүүлэх ажлыг хялбарчилдаг.

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

Reference

`act()`

Аливаа нэг компонентыг баталгаажуулахаар (assertion) бэлдэхдээ рендэр хийн багцлаад act() дуудан шинэчилнэ. Ингэснээр React хөтөч дээр хэрхэн ажиллах вэ гэдгийг илүү хялбар харж, тест хийх боломжтой болох юм.

Тэмдэглэл

Та хэрэв react-test-renderer ашиглавал act экспорт мөн байх ба энэ нь адилхан үүрэг гүйцэтгэдэг.

Жишээ нь бидэнд Counter компонент байлаа гэж бодъё:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

Тест хийхдээ ингэнэ:

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('can render and update a counter', () => {
  // Test first render and componentDidMount
  act(() => {    ReactDOM.createRoot(container).render(<Counter />);  });  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');

  // Test second render and 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');
});

DOM контэйнер нь document-д нэмэгдсэн тохиолдолд л DOM эвентийг илгээх боломжтой гэдгийг бүү мартаарай. Та react-testing-library гэх мэтийг ашиглан олон дахин гарч ирээд байдаг кодуудыг багасгаж болно.
recipes документ нь илүү act() хэрхэн ажиллах талаар илүү дэлгэрэнгүй мэдээлэл жишээнүүд болон хэрэглээтэй хамт агуулдаг.

`mockComponent()`

mockComponent(
  componentClass,
  [mockTagName]
)

Хэрэг болох методтай нийцүүлэн сайжруулах зорилгоор уг метод руу хуурамч компонент модуль дамжуулан хуулбар React компонентыг дуурайлган ашиглах боломжтой. Зүгээр л рендэр хийхийн оронд уг компонент нь хүүтэй, энгийн <div> (эсвэл mockTagName байвал өөр нэг таг) болж хувирна.

Тэмдэглэл:

mockComponent() is a legacy API. We recommend using jest.mock() instead.

`isElement()`

isElement(element)

Хэрэв element нь React элемент бол true гэж буцаана.

`isElementOfType()`

isElementOfType(
  element,
  componentClass
)

Element нь React componentClass гэсэн төрлийн React элемент бол true гэнэ.

`isDOMComponent()`

isDOMComponent(instance)

Instance нь DOM компонент (<div>, <span> г.м) бол true гэнэ.

`isCompositeComponent()`

isCompositeComponent(instance)

Хэрэв instance нь класс, функц гэх мэт хэрэглэгчийн тодорхойлсон компонент бол true гэж буцаана.

`isCompositeComponentWithType()`

isCompositeComponentWithType(
  instance,
  componentClass
)

Хэрэв instance нь React componentClass гэх төрлийн компонент бол true гэж буцаана.

`findAllInRenderedTree()`

findAllInRenderedTree(
  tree,
  test
)

tree-ны бүх компонент рүү аялан шилжиж, test(component) нь true гэх үеийн бүх компонентуудыг цуглуулдаг. Дангаараа ашиглах боломжгүй ч бусад тест хийх ажиллагаанд чухал нөлөөтэй байдаг.

`scryRenderedDOMComponentsWithClass()`

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

Рендэр хийсэн салбар модноос className-той тохирсон нэртэй класс бүхий DOM компонентууд болох бүх DOM элементүүдийг олдог.

`findRenderedDOMComponentWithClass()`

findRenderedDOMComponentWithClass(
  tree,
  className
)

scryRenderedDOMComponentsWithClass()-тай төстэй. Гэхдээ нэг үр дүн байх ёстой гэж үзэх ба нэг үр дүнг буцаана эсвэл нэгээс өөр тооны таарч буй үр дүн байвал онцгой нэг тохиолдол гэж үздэг.

`scryRenderedDOMComponentsWithTag()`

scryRenderedDOMComponentsWithTag(
  tree,
  tagName
)

Рендэр хийсэн салбар модноос tagName-той тохирсон нэртэй таг бүхий DOM компонентууд болох бүх DOM элементүүдийг олдог.

`findRenderedDOMComponentWithTag()`

findRenderedDOMComponentWithTag(
  tree,
  tagName
)

scryRenderedDOMComponentsWithTag()-тай төстэй. Гэхдээ нэг үр дүн байх ёстой гэж үзэх ба нэг үр дүнг буцаана эсвэл нэгээс өөр тооны таарч буй үр дүн байвал онцгой нэг тохиолдол гэж үздэг.

`scryRenderedComponentsWithType()`

scryRenderedComponentsWithType(
  tree,
  componentClass
)

componentClass-тай ижил төрлийн компонентын бүх instance-ыг олдог.

`findRenderedComponentWithType()`

findRenderedComponentWithType(
  tree,
  componentClass
)

scryRenderedComponentsWithType()-тай адилхан. Гэхдээ нэг үр дүн байх ёстой гэж үзэх ба нэг үр дүнг буцаана эсвэл нэгээс өөр тооны таарч буй үр дүн байвал онцгой нэг тохиолдол гэж үздэг.

`renderIntoDocument()`

renderIntoDocument(element)

Документ дотор detach хийсэн DOM node руу React элементийг рендэр хийнэ. Уг функц нь DOM шаардана Үр дүн нь үүнтэй ижил:

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

Тэмдэглэл:

React импорт хийхээс өмнө window, window.document, window.document.createElement нарыг глобал буюу хаанаас ч хандах боломжтой болгох хэрэгтэй. Тэгэхгүй бол DOM-д хандаж чадахгүй, setState гэх мэт метод ажиллахгүй гэж React бодно.

Бусад үйлчилгээ

`Simulate`

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

DOM дээр eventData гэсэн эвентийн өгөгдөл бүхий эвент илгээж буй мэт болгодог.

Simulate-д React-ын ойлгох бүх эвентэд зориулсан метод бий.

Элемент дээр дарах

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

Утга оруулах талбарт байх үр дүнг өөрчлөөд ENTER дарах.

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

Тэмдэглэл

React хийж өгөхгүй учраас та компонентдоо ашиглаж байгаа эвент пропертийн талаар мэдээлэл оруулах ёстой (keyCode нь ингэдэг г.м).

Is this page useful?Edit this page