1
resposta

Como testar o usuário digitando em um input que é guiado por uma ref REACT

Insira aqui a descrição dessa imagem para ajudar na acessibilidade1, Nessa aba eu declaro uma ref e um state

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Nessa outra aba eu faço 2 testes, um simulando a alteração do campo value de um input, que está sendo segurado por um estado, como mostra na fig.1 e outro que está segundo segurado por uma ref. fig.1; quando o teste é realizado pelo estado, é alterado normalmente e o teste passa, porém quando estou utilizando uma ref, não consigo alterar para simular o comportamento do usuário.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Na terceira imagem tem apenas os resultados dos testes, mostrando que o primeiro passou e o segundo falhou retornando undefined depois da alteração.

Adicionais: Já tentei UserEvent.type Já pesquisei sobre testes com o react unit testing e não encontrei Também já busquei sobre Enzyme e foi aqui que parei.

Se alguém puder me ajudar, agradeço

1 resposta

Oi, Maiara, tudo bem?

Uma alternativa que você pode tentar é utilizar o método fireEvent.change do Testing Library em conjunto com a "ref". Por exemplo:

import { render, fireEvent } from '@testing-library/react';

test('testando input guiado por ref', () => {
  const inputRef = React.createRef();
  render(<input ref={inputRef} />);
  fireEvent.change(inputRef.current, { target: { value: 'novo valor' } });
  expect(inputRef.current.value).toBe('novo valor');
});

Dessa forma, você pode simular a alteração do valor do input guiado por uma ref e verificar se o valor foi alterado corretamente.

Espero que dê tudo certo. Abraços e bons estudos!