Test Vasitələri

İdxal Etmək

import ReactTestUtils from 'react-dom/test-utils'; // ES6
var ReactTestUtils = require('react-dom/test-utils'); // NPM ilə ES5

İcmal

ReactTestUtils, React komponentlərini öz seçdiyiniz freymvorklarda test etməyi asanlaşdırır. Javascript-i əziyyətsiz test etmək üçün, biz Facebook-da Jest-dən istifadə edirik. Jest-in veb səhifəsində olan React dərsliyindən istifadə edərək Jest-dən istifadə etməyə başlayın.

Qeyd:

Biz React Testing Library kitabxanasından istifadə etməyi tövsiyə edirik. Bu kitabxana, son istifadəçilərin komponentləri istifadə etdiyi kimi testlərin yazılmasını təşviq edir və imkan yaradır.

React 16-dan əvvəlki versiyalarda, Airbnb-in test etmək üçün yaratdığı Enzyme qurğusundan istifadə edə bilərsiniz. Bu qurğu ilə React komponentlərinin nəticəsini asan şəkildə test etmək mümkündür.

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

Arayış

`act()`

Komponenti iddialara hazırlamaq üçün, komponenti render edən və yeniləyən kodu act() çağışının içində yerləşdirin. Bu sizin testlərinizin React-in brauzerdə işlədiyi kimi icra edilməsinə imkan yaradır.

Qeyd

Əgər siz react-test-renderer işlədirsinizsə, bu kitabxana da sizə eyni formada işləyən act funksiyası ilə təmin edir.

Məsələn, fərz edək ki, bizim olan Counter komponentimiz var:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `${this.state.count} dəfə tıklamısınız`;
  }
  componentDidUpdate() {
    document.title = `${this.state.count} dəfə tıklamısınız`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>{this.state.count} dəfə tıklamısınız</p>
        <button onClick={this.handleClick}>
          Tıkla
        </button>
      </div>
    );
  }
}

Bu komponenti aşağıdakı formada test edə bilərik:

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('counter-i render və yeniləyir', () => {
  // İlk renderi və componentDidMount-u test et
  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');

  // İkinci renderi və componentDidUpdate-i render et
  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('1 dəfə tıkladınız');
  expect(document.title).toBe('1 dəfə tıkladınız');
});

Yaddan çıxarmayın ki, DOM hadisələri yalnız DOM konteyneri document-ə əlavə olduqdan sonra göndərilir. Kodun uzunluğunu azaltmaq üçün React Testing Library kimi köməkçi kitabxanalardan istifadə edə bilərsiniz.

Reseptlər sənədində act() funksiyasının işləməyi haqqında misallar ilə daha ətraflı məlumat var.

`mockComponent()`

mockComponent(
  componentClass,
  [mockTagName]
)

Mok olunmuş komponent modulunu göndərərək komponentə əlavə metodlar əlavə edin. Bu sizə komponenti dummy React komponenti kimi işlətməyə imkan yaradır. Həmişə render etdiyinizdən fərqli olaraq, komponent təmin edilən uşaqları olan sadə <div>-ə (və ya mockTagName-də təyin edilmiş bir təqə) çevriləcək.

Qeyd:

mockComponent() köhnə API-dır. Biz jest.mock() işlətməyi tövsiyə edirik.

`isElement()`

isElement(element)

element React elementi olduqda true qaytarır.

`isElementOfType()`

isElementOfType(
  element,
  componentClass
)

element componentClass tipli React elementi olduqda true qaytarır.

`isDOMComponent()`

isDOMComponent(instance)

instance DOM komponenti olduqda (<div> və ya <span> kimi) true qaytarır.

`isCompositeComponent()`

isCompositeComponent(instance)

instance xüsusi yaradılmış komponent olduqda (sinif və ya funksiya komponentləri kimi) true qaytarır.

`isCompositeComponentWithType()`

isCompositeComponentWithType(
  instance,
  componentClass
)

instance componentClass tipli React komponenti olduqda true qaytarır.

`findAllInRenderedTree()`

findAllInRenderedTree(
  tree,
  test
)

tree-də olan bütün komponentlərdən keçib bütün test(component) true olan komponentləri toplayın. Bu funksiya təklikdə faydalı deyil. Amma digər test qurğuları üçün baza kimi işlədilə bilər.

`scryRenderedDOMComponentsWithClass()`

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

Sinif adları className olan, render edilmiş komponent ağacında bütün DOM elementləri tapın.

`findRenderedDOMComponentWithClass()`

findRenderedDOMComponentWithClass(
  tree,
  className
)

scryRenderedDOMComponentsWithClass() kimi amma yalnız bir nəticə qatarır. Birdən çox nəticə olduqda istisna atır.

`scryRenderedDOMComponentsWithTag()`

scryRenderedDOMComponentsWithTag(
  tree,
  tagName
)

Təq adları tagName olan, render edilmiş komponent ağacında bütün DOM elementləri tapın.

`findRenderedDOMComponentWithTag()`

findRenderedDOMComponentWithTag(
  tree,
  tagName
)

scryRenderedDOMComponentsWithTag() kimi amma yalnız bir nəticə qatarır. Birdən çox nəticə olduqda istisna atır.

`scryRenderedComponentsWithType()`

scryRenderedComponentsWithType(
  tree,
  componentClass
)

Tipi componentClass olan bütün komponentlərin instansiyalarını tapın.

`findRenderedComponentWithType()`

findRenderedComponentWithType(
  tree,
  componentClass
)

scryRenderedComponentsWithType() kimi amma yalnız bir nəticə qatarır. Birdən çox nəticə olduqda istisna atır.

`renderIntoDocument()`

renderIntoDocument(element)

Dokumentdən ayrılmış DOM noduna React elementini render edin. Bu funksiya DOM-dan asılıdır. Bu funksiyanın ekvivalenti aşağıdakı koda bənzəyir:

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

Qeyd:

React-i idxal etməmişdən öncə window, window.document və window.document.createElement obyektləri qlobal mövcud olmalıdırlar. Əks halda React, DOM-un mövcud olmadığını fikirləşəcək və setState kimi funksiyalar işləməyəcək.

Digər Qurğular

`Simulate`

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

Məcburi olmayan eventData hadisə məlumatları ilə DOM noda Hadisə göndərilməsini simulyasiya edin.

React-in anladığı hər hadisə üçün Simulate-də funksiya var.

Elementi tıklamaq

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

Daxil olma sahəsinin dəyərini dəyişmək və klaviaturda ENTER düyməsini tıklamaq.

// <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});

Qeyd

Komponentdə işlətdiniz bütün hadisə parametrlərini özünüz təmin etməlisiniz (məsələn, keyCode, which, və s.). Çünki, React bu parametrləri sizin üçün yaratmır.

Is this page useful?Bu səhifəni redaktə edin