Skip to content

Latest commit

 

History

History
350 lines (258 loc) · 9.73 KB

addons-test-utils.md

File metadata and controls

350 lines (258 loc) · 9.73 KB
Raw
id title permalink layout category
test-utils
Test Araçları
docs/test-utils.html
docs
Reference

Ekleme

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

Test Araçlarına Genel Bakış {#overview}

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. Buradan React ile Jest'e nasıl başlayacağınız hakkında bilgi bulabilirsiniz.

Not:

Bileşenlerinizi son kullanıcıymışcasına gibi kullanan testlerinizi etkinleştirmek ve kullanabilmek için tasarlanmış react-testing-library kullanmanızı öneririz.

Alternatif olarak Airbnb Enzyme adında bir test aracı yayınladı. Bu araç, React bileşenlerinizi test etmenizi, üzerinde gezinmenizi ve değiştirmenizi kolaylaştırmaktadır.

Referanslar {#reference}

act() {#act}

Bileşen testlerini hazırlamak için kodunuzu paket haline getirin ve act()'i kullanarak bileşeniniz içersinde güncelleme yapabilirsiniz. act(), React'ın 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 App 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';
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.render(<Counter />, container);
  });
  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');
});

DOM konteynerı documente eklendiğinde DOM olaylarının gönderilmesini sağlayabilirsiniz. Ana proje iskeletinizi küçültmek için react-testing-library gibi bir araç kullanabilirsiniz

mockComponent() {#mockcomponent}

mockComponent(
  componentClass,
  [mockTagName]
)

Sahte 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. shallow rendering'i veya jest.mock()'u kullanmanızı tavsiye ederiz.

isElement() {#iselement}

isElement(element)

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

isElementOfType() {#iselementoftype}

isElementOfType(
  element,
  componentClass
)

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

isDOMComponent() {#isdomcomponent}

isDOMComponent(instance)

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

isCompositeComponent() {#iscompositecomponent}

isCompositeComponent(instance)

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

isCompositeComponentWithType() {#iscompositecomponentwithtype}

isCompositeComponentWithType(
  instance,
  componentClass
)

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

findAllInRenderedTree() {#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ğil, ancak diğer test araçları için basit olarak kullanılmaktadır.

scryRenderedDOMComponentsWithClass() {#scryrendereddomcomponentswithclass}

scryRenderedDOMComponentsWithClass(
  tree,
  className
)

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

findRenderedDOMComponentWithClass() {#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}

scryRenderedDOMComponentsWithTag(
  tree,
  tagName
)

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

findRenderedDOMComponentWithTag() {#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}

scryRenderedComponentsWithType(
  tree,
  componentClass
)

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

findRenderedComponentWithType() {#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}

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

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 böylece setState gibi metodlar çalışmayacaktır.

Diğer Araçlar {#other-utilities}

Simulate {#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'ın sağlayamadığı ama bileşeninizde kullandığınız herhangi bir olay özelliğini (örneğin, keyCode, which, vb...) sizin sağlamanız gerekmektedir.