¿Cómo prueba la inexistencia de un elemento usando broma y reaccionar-prueba-biblioteca?

Tengo una biblioteca de componentes para la que estoy escribiendo pruebas unitarias para usar Jest y react-testing-library. En función de ciertos accesorios o eventos, quiero verificar que ciertos elementos no se representen.

getByText, getByTestIdetc tiro y error en react-testing-library si no se encuentra el elemento que hace que la prueba falle antes de que expect fuegos de función.

¿Cómo prueba algo que no existe en broma usando la biblioteca de pruebas de reacción?

De DOM Testing-library Docs – Aparición y desaparición

Los elementos de afirmación no están presentes

El estandar getBy los métodos arrojan un error cuando no pueden encontrar un elemento, por lo que si desea hacer una afirmación de que un elemento es no presente en el DOM, puede usar queryBy API en su lugar:

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

El queryAll La versión de las API devuelve una matriz de nodos coincidentes. La longitud de la matriz puede ser útil para las aserciones después de agregar o eliminar elementos del DOM.

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

not.toBeInTheDocument

El jest-dom biblioteca de utilidades proporciona la
.toBeInTheDocument() matcher, que se puede utilizar para afirmar que un elemento está en el cuerpo del documento o no. Esto puede ser más significativo que afirmar que el resultado de una consulta es 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()

Usar queryBy / queryAllBy.

Como usted dice, getBy* y getAllBy* lanzar un error si no se encuentra nada.

Sin embargo, los métodos equivalentes queryBy* y queryAllBy* en lugar de regresar null o []:

consulta por

queryBy* consultas devuelven el primer nodo coincidente para una consulta y devuelven null si ningún elemento coincide. Esto es útil para afirmar un elemento que no está presente. Esto arroja si se encuentra más de una coincidencia (use queryAllBy en su lugar).

consultaTodoPor
queryAllBy* las consultas devuelven una matriz de todos los nodos coincidentes para una consulta y devuelven una matriz vacía ([]) si ningún elemento coincide.

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

Entonces, para los dos específicos que mencionaste, en su lugar usarías queryByText y queryByTestIdpero estos funcionan para todas las consultas, no solo para esas dos.

getBy* arroja un error cuando no encuentra un elemento, por lo que puede verificarlo

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

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

expect(submitButton).not.toBeNull() // it exist

Debe usar queryByTestId en lugar de getByTestId.

Aquí hay un ejemplo de código en el que quiero probar si el componente con la identificación de “automóvil” no 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();
  });
});

Funcionó para mí (si quieres usar getByTestId):

expect(() => getByTestId('time-label')).toThrow()

Espero que esto sea útil

esta tabla muestra por qué/cuándo hay errores de función

qué funciones son asíncronas

¿Qué es la declaración de retorno para la función?