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?
Quais versões do React são afetadas por esse problema?
Versão React: 16.8.6
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.