React: TestUtils.renderIntoDocument retorna `null` quando um componente funcional válido é passado.

Criado em 10 abr. 2019  ·  4Comentários  ·  Fonte: facebook/react

Você quer solicitar um recurso ou relatar um bug ?
Eu quero relatar um bug.

Qual é o comportamento atual?
Atualmente, quando um componente funcional válido é passado para TestUtils.renderIntoDocument, ele retorna um valor nulo e não gera nenhum erro.

Demo
Este comportamento foi reproduzido em uma sandbox: https://codesandbox.io/s/1zpvll4j24

Verifique o console para ver a saída TestUtils.renderIntoDocument dos componentes de amostra preparados.

Soluções Alternativas
A solução alternativa que satisfaz tanto o SFC quanto o FC é envolver o componente no contêiner:

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

Qual é o comportamento esperado?

  • Para renderizar um componente funcional.
  • No pior caso - fornecendo um erro.

Quais versões do React são afetadas por esse problema?
Versão React: 16.8.6

Test Utils Question

Todos 4 comentários

Os componentes funcionais não têm instances , então o que você esperaria

TestUtils.renderIntoDocument(<FCCounter/>)

para retornar?

Além disso, de maneira geral, você pode explicar o que está tentando fazer? Você poderia usar forwardRef / useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle) para obter acesso a 'métodos' internos, mas estou curioso para saber o que você está tentando testar em tudo.

Depois de chamar TestUtils.renderIntoDocument com o componente clássico, estou totalmente habilitado para alcançá-lo state , props e manipular o componente usando setState . Então, o que eu esperava que TestUtils.renderIntoDocument retornasse é algum objeto que me permite usar state , props e setState .

Estou tentando testar componentes que são implementados como componentes funcionais. O objetivo principal é alterar o estado do componente e verificar se o estado alterado corresponde ao estado esperado pelo teste.

No caso de teste, tenho uma pré-condição, que os componentes devem ser testados como estão e não devem ser alterados para conter o código especificamente para fins de teste. Portanto, alterar o próprio componente para usar forwardRef/useImperativeHandle não é uma opção.

Os componentes da função @DeividasBakanas não têm instâncias. Você poderia acionar o botão, que atualizaria o estado por meio do envio de um evento. Em minha opinião, essa também é uma abordagem melhor do que tentar atualizar imperativamente a instância retornada de TestUtils.renderIntoDocument (no caso de componentes de classe).

Como @trueadm mencionado, não recomendamos testar os detalhes de implementação do próprio componente e usar adereços / eventos para acionar atualizações e fazer asserções na saída do componente. Eu poderia recomendar bibliotecas como react-testing-library https://github.com/kentcdodds/react-testing-library para tornar isso um pouco mais fácil. Kent também escreve extensivamente sobre o assunto, recomendaria.

Fechando este problema, pois é mais uma questão de uso do que um bug / solicitação de recurso.

Esta página foi útil?
0 / 5 - 0 avaliações