Test Araçları

Ekleme

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

Genel Bakış

ReactTestUtils, React bileşenlerini seçtiğiniz test çerçevesinde test etmeyi kolaylaştırır. Facebook, JavaScript testi için Jest‘i kullanmaktadır.

Not:

Bileşenlerinizi son kullanıcı kullanır gibi kullanan testler yazmanız ve etkinleştirmeniz için tasarlanmış React Testing Library‘yi kullanmanızı öneririz.

React versiyonu <= 16 olan uygulamalar için, Enzyme kütüphanesi, React bileşenlerinizin çıktısını test etmenizi, çıktının üzerinde gezinmenizi ve çıktıyı değiştirmenizi kolaylaştırmaktadır.

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

Başvuru Dokümanı

act()

Bileşen testlerini hazırlamak için kodunuzu paket haline getirip act()‘i kullanarak bileşeniniz içerisinde güncelleme yapabilirsiniz. act(), React’in tarayıcıda çalışma biçimine çok yakın bir şekilde çalışmasını sağlamaktadır.

Not

Eğer react-test-renderer‘ı kullanırsanız, bu size act çıktısının aynı şekilde davranmasını sağlar.

Örneğin aşağıdaki gibi bir Counter bileşenimizin olduğunu düşünün:

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} kez tıkladınız`;
  }
  componentDidUpdate() {
    document.title = `${this.state.count} kez tıkladınız`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div>
        <p>{this.state.count} kez tıkladınız</p>
        <button onClick={this.handleClick}>
          Beni tıkla
        </button>
      </div>
    );
  }
}

Bu bileşeni aşağıdaki gibi test edebiliriz:

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('sayacı render edebilir ve güncelleyebilir', () => {
  // render ve componentDidMount'u test eder
  act(() => {    ReactDOM.createRoot(container).render(<Counter />);  });  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('0 kez tıkladınız');
  expect(document.title).toBe('0 kez tıkladınız');

  // render and componentDidUpdate'u test eder
  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('1 kez tıkladınız');
  expect(document.title).toBe('1 kez tıkladınız');
});

Unutmayınız ki, document‘a DOM container’ı eklenmediği sürece, DOM olayları çalışmayacaktır. Bu tarz basmakalıp/sabit kodlarla uğraşmamak için, React Testing Library gibi bir kütüphaneyi kullanabilirsiniz.

Test Tarifleri sayfası act() in nasıl çalıştığına dair, örnek kullanımlarla birlikte, daha fazla bilgi içerir.

mockComponent()

mockComponent(
  componentClass,
  [mockTagName]
)

Mock (sahte ya da taklit) bir React bileşeni olarak kullanılabilmesine izin veren yöntemleri ekleyebilmek için bu metoda mock edilmiş bir bileşen modülü gönderin. Her zamanki gibi render etmesi yerine, bileşen belirtilen herhangi bir alt elemanı içeren basit bir <div> olacaktır. (Veya mockTagName belirtilmişse, belirtilen eleman olacaktır)

Not:

mockComponent() eski bir API’dır. Onun yerine jest.mock()‘u kullanmanızı tavsiye ederiz.

isElement()

isElement(element)

Eğer element herhangi bir React elemanı ise true döner.

isElementOfType()

isElementOfType(
  element,
  componentClass
)

Eğer element, React’in componentClass tipinde olan bir React elemanı ise true döner.

isDOMComponent()

isDOMComponent(instance)

Eğer instance, div veya span gibi bir DOM bileşeni ise true döner.

isCompositeComponent()

isCompositeComponent(instance)

Eğer instance, kullanıcı tanımlı sınıf veya fonksiyon gibi bileşeni ise true döner.

isCompositeComponentWithType()

isCompositeComponentWithType(
  instance,
  componentClass
)

Eğer instance, React’in componentClass tipinde olan bir React elemanı ise true döner.

findAllInRenderedTree()

findAllInRenderedTree(
  tree,
  test
)

tree içindeki tüm bileşenleri dolaşır ve test(component)‘ın true olduğu tüm bileşenleri toplar. Tek başına pek kullanışlı değildir, ancak diğer test araçları için basit olarak kullanılmaktadır.

scryRenderedDOMComponentsWithClass()

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

Render edilen ağaçta, belirtilen className ile eşleşen bütün DOM elemanlarını bulur.

findRenderedDOMComponentWithClass()

findRenderedDOMComponentWithClass(
  tree,
  className
)

scryRenderedDOMComponentsWithClass()‘a benzerdir, ancak sadece bir sonuç olmasını bekler ve geriye sonucu döndürür. (Birden fazla eşleşme varsa exception fırlatır).

scryRenderedDOMComponentsWithTag()

scryRenderedDOMComponentsWithTag(
  tree,
  tagName
)

Render edilen ağaçta, belirtilen tagName ile eşleşen bütün DOM elemanlarını bulur.

findRenderedDOMComponentWithTag()

findRenderedDOMComponentWithTag(
  tree,
  tagName
)

scryRenderedDOMComponentsWithTag()‘a benzerdir, ancak sadece bir sonuç olmasını bekler ve geriye sonucu döndürür. (Birden fazla eşleşme varsa exception fırlatır).

scryRenderedComponentsWithType()

scryRenderedComponentsWithType(
  tree,
  componentClass
)

Belirtilen componentClass‘a eşit olan bütün bileşenleri bulur.

findRenderedComponentWithType()

findRenderedComponentWithType(
  tree,
  componentClass
)

scryRenderedComponentsWithType()‘a benzerdir, ancak sadece bir sonuç olmasını bekler ve geriye sonucu döndürür. (Birden fazla eşleşme varsa exception fırlatır).

renderIntoDocument()

renderIntoDocument(element)

Bir React öğesini dökümandan ayrılmış bir DOM elemanı olarak render edin. Bu fonksiyonun DOM’a ihtiyacı vardır. Şuna eşdeğerdir:

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

Not:

React‘a eklemeden önce global olarak hazır olan window, window.document ve window.document.createElement‘e ihtiyacınız olacaktır. Aksi takdirde React DOM’a erişemediğini düşünecektir ve bu sebeple setState gibi metodlar çalışmayacaktır.

Diğer Araçlar

Simulate

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

İsteğe bağlı olan eventData olay verileri ile bir DOM elemanı üzerinde olay gönderimini simüle edebilirsiniz.

Simulate, React’in anlayabildiği her olay için bir metoda sahiptir.

Elemana tıklama

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

Input alanındaki değeri değiştirme ve ENTER’a basma

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

Not

React’in sağlayamadığı ama bileşeninizde kullandığınız herhangi bir olay özelliğini (örneğin: keyCode, which, vb…) sizin sağlamanız gerekmektedir.