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

Importando

\n
import TestRenderer from 'react-test-renderer'; // ES6\nconst TestRenderer = require('react-test-renderer'); // ES5 com npm
\n

Visão Geral

\n

Este pacote fornece um renderizador React que pode ser usado para renderizar componentes React para objetos JavaScript puros, sem depender do DOM ou de um ambiente móvel nativo.

\n

Essencialmente, esse pacote facilita a captura de um snapshot da hierarquia de visualização da plataforma (semelhante a uma árvore DOM) processada por um componente React DOM ou React Native sem usar um navegador ou jsdom.

\n

Exemplo:

\n
import TestRenderer from 'react-test-renderer';\n\nfunction Link(props) {\n  return <a href={props.page}>{props.children}</a>;\n}\n\nconst testRenderer = TestRenderer.create(\n  <Link page=\"https://www.facebook.com/\">Facebook</Link>\n);\n\nconsole.log(testRenderer.toJSON());\n// { type: 'a',\n//   props: { href: 'https://www.facebook.com/' },\n//   children: [ 'Facebook' ] }
\n

Você pode usar o recurso de teste de snapshot do Jest para salvar automaticamente uma cópia da árvore JSON em um arquivo e verificar em seus testes que ela não foi alterada: aprenda mais.

\n

Você também pode percorrer o resultado para encontrar nós específicos e fazer verificações sobre eles.

\n
import TestRenderer from 'react-test-renderer';\n\nfunction MyComponent() {\n  return (\n    <div>\n      <SubComponent foo=\"bar\" />\n      <p className=\"my\">Olá</p>\n    </div>\n  )\n}\n\nfunction SubComponent() {\n  return (\n    <p className=\"sub\">Sub</p>\n  );\n}\n\nconst testRenderer = TestRenderer.create(<MyComponent />);\nconst testInstance = testRenderer.root;\n\nexpect(testInstance.findByType(SubComponent).props.foo).toBe('bar');\nexpect(testInstance.findByProps({className: \"sub\"}).children).toEqual(['Sub']);
\n

TestRenderer

\n\n

Instância de TestRenderer

\n\n

TestInstance

\n\n

Referência

\n

TestRenderer.create()

\n
TestRenderer.create(element, options);
\n

Cria uma instância do TestRenderer com o elemento React fornecido. Este método não usa o DOM real, mas ainda renderiza completamente a árvore de componentes na memória para que você possa fazer verificações sobre ela. Retorna uma instância TestRender.

\n

TestRenderer.act()

\n
TestRenderer.act(callback);
\n

Similar to the act() helper from react-dom/test-utils, TestRenderer.act prepares a component for assertions. Use this version of act() to wrap calls to TestRenderer.create and testRenderer.update.

\n
import {create, act} from 'react-test-renderer';\nimport App from './app.js'; // The component being tested\n\n// render the component\nlet root; \nact(() => {\n  root = create(<App value={1}/>)\n});\n\n// make assertions on root \nexpect(root.toJSON()).toMatchSnapshot();\n\n// update with some different props\nact(() => {\n  root.update(<App value={2}/>);\n})\n\n// make assertions on root \nexpect(root.toJSON()).toMatchSnapshot();
\n

testRenderer.toJSON()

\n
testRenderer.toJSON()
\n

Retorna um objeto representando a árvore renderizada. Essa árvore contém apenas os nós específicos da plataforma como <div> ou <View> e suas props, mas não contém nenhum componente criado pelo usuário. Isso é útil para testes de snapshot.

\n

testRenderer.toTree()

\n
testRenderer.toTree()
\n

Retorna um objeto representando a árvore renderizada. A representação é mais detalhada que a fornecida por toJSON(), e inclui os componentes criados pelo usuário. Você provavelmente não precisa desse método, a menos que esteja escrevendo sua própria biblioteca de asserções sobre o renderizador de teste.

\n

testRenderer.update()

\n
testRenderer.update(element)
\n

Re-renderiza a árvore na memória com um novo elemento raiz. Isso simula uma atualização do React na raiz. Se o novo elemento tiver o mesmo tipo e chave do elemento anterior, a árvore será atualizada; caso contrário, ele irá montar novamente uma nova árvore.

\n

testRenderer.unmount()

\n
testRenderer.unmount()
\n

Desmonta a árvore na memória, acionando os eventos de ciclo de vida apropriados.

\n

testRenderer.getInstance()

\n
testRenderer.getInstance()
\n

Retorna a instância correspondente ao elemento raiz, se disponível. Isso não funcionará se o elemento raiz for um componente de função, porque eles não possuem instâncias.

\n

testRenderer.root

\n
testRenderer.root
\n

Retorna o objeto raiz “instância de teste” que é útil para fazer asserções sobre nós específicos na árvore. Você pode usá-lo para encontrar outras “instâncias de teste” mais abaixo.

\n

testInstance.find()

\n
testInstance.find(test)
\n

Encontra uma única instância de teste descendente para a qual test(testInstance) retorne true. Se test(testInstance) não retornar true para exatamente uma instância de teste, isso causará um erro.

\n

testInstance.findByType()

\n
testInstance.findByType(type)
\n

Encontra uma única instância de teste descendente com o type fornecido. Se não houver exatamente uma instância de teste com o type fornecido, isso causará um erro.

\n

testInstance.findByProps()

\n
testInstance.findByProps(props)
\n

Encontra uma única instância de teste descendente com os props fornecidos. Se não houver exatamente uma instância de teste com os props fornecidos, isso causará um erro.

\n

testInstance.findAll()

\n
testInstance.findAll(test)
\n

Encontra todas as instâncias de teste descendentes para as quais test(testInstance) retorne true.

\n

testInstance.findAllByType()

\n
testInstance.findAllByType(type)
\n

Encontra todas as instâncias de teste descendentes com o type fornecido.

\n

testInstance.findAllByProps()

\n
testInstance.findAllByProps(props)
\n

Encontra todas as instâncias de teste descendentes com os props fornecidos.

\n

testInstance.instance

\n
testInstance.instance
\n

A instância do componente correspondente a essa instância de teste. Está disponível apenas para componentes de classe, pois os componentes de função não possuem instâncias. Ele corresponde ao valor this dentro do componente fornecido.

\n

testInstance.type

\n
testInstance.type
\n

O tipo de componente correspondente a essa instância de teste. Por exemplo, um componente <Button /> tem o tipo Button.

\n

testInstance.props

\n
testInstance.props
\n

Os props correspondentes a essa instância de teste. Por exemplo, um componente <Button size="small"/> possui {size: 'small'} como props.

\n

testInstance.parent

\n
testInstance.parent
\n

A instância de teste pai desta instância de teste.

\n

testInstance.children

\n
testInstance.children
\n

As instâncias de testes descendentes desta instância de teste.

\n

Ideias

\n

Você pode passar a função createNodeMock para TestRenderer.create como opção, que permite mocks personalizados de refs.\ncreateNodeMock aceita o elemento atual e deve retornar um objeto mock de ref.\nIsso é útil quando você testa um componente que depende de refs.

\n
import TestRenderer from 'react-test-renderer';\n\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.input = null;\n  }\n  componentDidMount() {\n    this.input.focus();\n  }\n  render() {\n    return <input type=\"text\" ref={el => this.input = el} />\n  }\n}\n\nlet focused = false;\nTestRenderer.create(\n  <MyComponent />,\n  {\n    createNodeMock: (element) => {\n      if (element.type === 'input') {\n        // mock de uma função de focus\n        return {\n          focus: () => {\n            focused = true;\n          }\n        };\n      }\n      return null;\n    }\n  }\n);\nexpect(focused).toBe(true);
","frontmatter":{"title":"Renderizador de Teste","next":null,"prev":null},"fields":{"path":"content/docs/reference-test-renderer.md","slug":"docs/test-renderer.html"}}},"pageContext":{"slug":"docs/test-renderer.html"}},"staticQueryHashes":[]}