es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo escribir pruebas de React con Jest

26 Jul, 2023 Programación

A continuación se muestra mi archivo index.js. Allí quiero probar si la aplicación se renderiza sin errores.

import ReactDOM from ‘react-dom’;
import { StrictMode } from ‘react’;

import App from ‘./App’;
import ‘./index.scss’;

ReactDOM.render(


,
document.getElementById(‘root’)
);

El archivo index.test.js que he escrito se muestra a continuación. Aunque la prueba se ha pasado, tiene una línea sin cubrir.

/* eslint-env jest */
import ReactDOM from ‘react-dom’;
import { StrictMode } from ‘react’;

jest.mock(‘react-dom’, () => ({ render: jest.fn() }));

describe(‘index.js’, () => {
it(‘renders without crashing’, () => {
ReactDOM.render(StrictMode);
expect(ReactDOM.render).toHaveBeenCalledWith(StrictMode);
});
});

La línea 1 se marca como no cubierta.

import ReactDOM from ‘react-dom’;

Entonces, ¿me puedes ayudar a mejorar el caso de prueba para esa línea?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mejorar el caso de prueba para la línea no cubierta, puedes agregar un caso de prueba para verificar si ReactDOM se importa correctamente en el archivo index.test.js. Esto se puede hacer utilizando la función expect() y el comparador toBeTruthy(), de la siguiente manera:

    describe('index.js', () => {
  it('importa ReactDOM correctamente', () => {
    expect(ReactDOM).toBeTruthy();
  });

  it('se renderiza sin problemas', () => {
    ReactDOM.render(<strictmode><app></app></strictmode>, document.createElement('div'));
    expect(ReactDOM.render).toHaveBeenCalledWith(<strictmode><app></app></strictmode>, expect.anything());
  });
});

    El primer caso de prueba verifica si ReactDOM se importa correctamente al asegurarse de que sea verdadero. Esto cubrirá la línea no cubierta previamente.

    El segundo caso de prueba verifica si la aplicación se renderiza sin problemas al renderizarla en un nuevo elemento div utilizando ReactDOM.render(), y luego verificando que se llamó con los argumentos correctos utilizando la función expect() y el comparador toHaveBeenCalledWith().

    Ten en cuenta que el segundo argumento de toHaveBeenCalledWith() se establece en expect.anything() porque el id del elemento raíz no se especifica en el archivo de prueba, por lo que podría tener cualquier valor.

Comments are closed.