{"componentChunkName":"component---src-templates-docs-js","path":"/docs/test-utils.html","result":{"data":{"markdownRemark":{"html":"

Importando

\n
import ReactTestUtils from 'react-dom/test-utils'; // ES6\nvar ReactTestUtils = require('react-dom/test-utils'); // ES5 com npm
\n

Visão Geral

\n

ReactTestUtils torna fácil para testar componentes em React utilizando framework de teste à sua escolha. No Facebook, nós utilizamos Jest para testar JavaScript sem dores. Aprenda como utilizar o Jest através do website do Jest Tutorial para React.

\n
\n

Nota:

\n

Nós recomendamos usar o react-testing-library que é projetado para permitir e encorajar escrita de testes que utilizam seus componentes como os usuários finais utilizarão.\nAlternativamente, Airbnb lançou um utilitário de teste chamado Enzyme, que torna fácil para afirmar, manipular e cruzar a saída dos seus componentes React.

\n
\n\n

Referência

\n

act()

\n

Para preparar um componente para determinações, coloque o código de renderização e de atualizações dentro de uma chamada act(). Isso faz com que o teste rode mais próximo de como React funciona no browser.

\n
\n

Nota:

\n

Se você usa react-test-renderer, ele provê um exportador de act que se comporta da mesma maneira.

\n
\n

Por exemplo, vamos dizer que nós temos esse componente Counter:

\n
class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {count: 0};\n    this.handleClick = this.handleClick.bind(this);\n  }\n  componentDidMount() {\n    document.title = `Você clicou ${this.state.count} vezes`;\n  }\n  componentDidUpdate() {\n    document.title = `Você clicou ${this.state.count} vezes`;\n  }\n  handleClick() {\n    this.setState(state => ({\n      count: state.count + 1,\n    }));\n  }\n  render() {\n    return (\n      <div>\n        <p>Você clicou {this.state.count} vezes</p>\n        <button onClick={this.handleClick}>\n          Clique aqui\n        </button>\n      </div>\n    );\n  }\n}
\n

Aqui está como nós podemos testar:

\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { act } from 'react-dom/test-utils';import Counter from './Counter';\n\nlet container;\n\nbeforeEach(() => {\n  container = document.createElement('div');\n  document.body.appendChild(container);\n});\n\nafterEach(() => {\n  document.body.removeChild(container);\n  container = null;\n});\n\nit('can render and update a counter', () => {\n  // Teste da primeira renderização e componentDidMount\n  act(() => {    ReactDOM.render(<Counter />, container);  });  const button = container.querySelector('button');\n  const label = container.querySelector('p');\n  expect(label.textContent).toBe('Você clicou 0 vezes');\n  expect(document.title).toBe('Você clicou 0 vezes');\n\n  // Teste do segundo render e componentDidUpdate\n  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('Você clicou 1 vezes');\n  expect(document.title).toBe('Você clicou 1 vezes');\n});
\n\n
\n

mockComponent()

\n
mockComponent(\n  componentClass,\n  [mockTagName]\n)
\n

Passe um módulo de componente mockado para este método para melhorá-lo com métodos que permitem a utilização como um dummy componente React. Ao invés de renderizar como de costume, o componente vai se tornar um simples <div> (ou outra tag se mockTagName for fornecido) contendo qualquer filho fornecido.

\n
\n

Nota:

\n

mockComponent() é uma API legada. Nós recomendamos utilizar jest.mock().

\n
\n
\n

isElement()

\n
isElement(element)
\n

Retorna true se element é algum elemento React.

\n
\n

isElementOfType()

\n
isElementOfType(\n  element,\n  componentClass\n)
\n

Retorna true se element é um elemento React cujo tipo é de um React componentClass.

\n
\n

isDOMComponent()

\n
isDOMComponent(instance)
\n

Retorna true se instance é um componente DOM (como <div> ou <span>).

\n
\n

isCompositeComponent()

\n
isCompositeComponent(instance)
\n

Retorna true se instance é um componente definido pelo usuário, como uma classe ou função.

\n
\n

isCompositeComponentWithType()

\n
isCompositeComponentWithType(\n  instance,\n  componentClass\n)
\n

Retorna true se instance é um componente cujo tipo é de um React componentClass.

\n
\n

findAllInRenderedTree()

\n
findAllInRenderedTree(\n  tree,\n  test\n)
\n

Cruza todos componentes em tree e acumula todos componentes em que test(component) seja true. Não é tão útil sozinho, mas é utilizado como primitivo para outros utilitários de teste.

\n
\n

scryRenderedDOMComponentsWithClass()

\n
scryRenderedDOMComponentsWithClass(\n  tree,\n  className\n)
\n

Encontra todos elementos DOM dos componentes na árvore de renderização que possuam o nome de classe igual a className.

\n
\n

findRenderedDOMComponentWithClass()

\n
findRenderedDOMComponentWithClass(\n  tree,\n  className\n)
\n

Similar a scryRenderedDOMComponentsWithClass() mas espera apenas um resultado, e retorna esse resultado, ou lança uma exceção se existir mais de um equivalente.

\n
\n

scryRenderedDOMComponentsWithTag()

\n
scryRenderedDOMComponentsWithTag(\n  tree,\n  tagName\n)
\n

Encontra todos elementos DOM do componente na árvore de renderização que possua a tag com o nome igual a tagName.

\n
\n

findRenderedDOMComponentWithTag()

\n
findRenderedDOMComponentWithTag(\n  tree,\n  tagName\n)
\n

Similar a scryRenderedDOMComponentsWithTag() mas espera apenas um resultado, e retorna esse resultado, ou lança uma exceção se existir mais de um equivalente.

\n
\n

scryRenderedComponentsWithType()

\n
scryRenderedComponentsWithType(\n  tree,\n  componentClass\n)
\n

Encontra todas as instâncias do componente com tipo igual a componentClass.

\n
\n

findRenderedComponentWithType()

\n
findRenderedComponentWithType(\n  tree,\n  componentClass\n)
\n

Similar a scryRenderedComponentsWithType() mas espera apenas um resultado, e retorna esse resultado, ou lança uma exceção se existir mais de um equivalente.

\n
\n

renderIntoDocument()

\n
renderIntoDocument(element)
\n

Renderiza um elemento React em um nó DOM desaclopado no documento. Esta função precisa de um DOM. É efetivamente equivalente à:

\n
const domContainer = document.createElement('div');\nReactDOM.render(element, domContainer);
\n
\n

Nota:

\n

Você precisa ter window, window.document e window.document.createElement disponíveis globalmente antes de importar React. Caso contrário o React vai pensar que não pode acessa o DOM e os métodos como setState não funcionarão.

\n
\n
\n

Outros Utilitários

\n

Simulate

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

Simule um dispacho de evento para um nó do DOM com dados opcionais do evento eventData.

\n

Simulate tem um método para cada evento que React entende

\n

Clicando em um elemento

\n
// <button ref={(node) => this.button = node}>...</button>\nconst node = this.button;\nReactTestUtils.Simulate.click(node);
\n

Alterando o valor de um campo de input e depois pressionando ENTER.

\n
// <input ref={(node) => this.textInput = node} />\nconst node = this.textInput;\nnode.value = 'girafa';\nReactTestUtils.Simulate.change(node);\nReactTestUtils.Simulate.keyDown(node, {key: \"Enter\", keyCode: 13, which: 13});
\n
\n

Nota:

\n

Você precisa fornecer alguma propriedade de evento que está sendo usado em seu componente (e.g. keyCode, which, etc…) já que o React não está criando nenhum desses para você.

\n
\n
","frontmatter":{"title":"Utilitários de Teste","next":null,"prev":null},"fields":{"path":"content/docs/addons-test-utils.md","slug":"docs/test-utils.html"}}},"pageContext":{"slug":"docs/test-utils.html"}},"staticQueryHashes":[]}