Como você testa a inexistência de um elemento usando jest e react-testing-library?

Tenho uma biblioteca de componentes para a qual estou escrevendo testes de unidade para usar Jest e react-testing-library. Com base em certos adereços ou eventos, quero verificar se certos elementos não estão sendo renderizados.

getByText, getByTestIdetc., lance e erro react-testing-libraryse o elemento não for encontrado, fazendo com que o teste falhe antes do expectdisparo da função.

Como você testa se algo não existe em brincadeira usando a biblioteca react-testing?

Dos documentos da biblioteca de testes DOM - Aparência e desaparecimento

Elementos de afirmação não estão presentes

Os getBymétodos padrão geram um erro quando não conseguem encontrar um elemento, então se você quiser fazer uma afirmação de que um elemento não está presente no DOM, você pode usar queryByAPIs:

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

A queryAllversão das APIs retorna uma matriz de nós correspondentes. O comprimento da matriz pode ser útil para asserções depois que os elementos são adicionados ou removidos do DOM.

const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(2) // expect 2 elements

not.toBeInTheDocument

A jest-dombiblioteca de utilitários fornece o .toBeInTheDocument()matcher, que pode ser usado para afirmar se um elemento está no corpo do documento ou não. Isso pode ser mais significativo do que afirmar o resultado de uma consulta null.

import '@testing-library/jest-dom/extend-expect'
// use `queryBy` to avoid throwing an error with `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()

Use queryBy/ queryAllBy.

Como você diz, getBy*e getAllBy*lança um erro se nada for encontrado.

No entanto, os métodos equivalentes queryBy*e em queryAllBy*vez disso retornam nullou []:

queryBy

queryBy*as consultas retornam o primeiro nó correspondente para uma consulta e retornam nullse nenhum elemento corresponder. Isso é útil para declarar um elemento que não está presente. Isso ocorre se mais de uma correspondência for encontrada (use queryAllBy em vez disso).

As queryAllBy* consultas queryAllBy retornam uma matriz de todos os nós correspondentes para uma consulta e retornam uma matriz vazia ( []) se nenhum elemento corresponder.

https://testing-library.com/docs/dom-testing-library/api-queries#queryby

Portanto, para os dois específicos que você mencionou, você usaria queryByTexte queryByTestId, mas eles funcionam para todas as consultas, não apenas para esses dois.

Você deve usar queryByTestId em vez de getByTestId.

Aqui está um exemplo de código onde eu quero testar se o componente com a id de "carro" não existe.

 describe('And there is no car', () => {
  it('Should not display car mark', () => {
    const props = {
      ...defaultProps,
      base: null,
    }
    const { queryByTestId } = render(
      <IntlProvider locale="fr" messages={fr}>
        <CarContainer{...props} />
      </IntlProvider>,
    );
    expect(queryByTestId(/car/)).toBeNull();
  });
});

getBy * gera um erro ao não encontrar um elemento, então você pode verificar se

expect(() => getByText('your text')).toThrow('Unable to find an element');

Você pode usar react-native-testing-library "getAllByType" e, em seguida, verificar se o componente é nulo. Tem a vantagem de não precisar definir TestID, também deve funcionar com componentes de terceiros

 it('should contain Customer component', () => {
    const component = render(<Details/>);
    const customerComponent = component.getAllByType(Customer);
    expect(customerComponent).not.toBeNull();
  });