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.

  • es.davy.ai/
  • Programación /
  • Utilizando querySelectorAll en lugar de querySelector para las pruebas con toBeInTheDocument

Utilizando querySelectorAll en lugar de querySelector para las pruebas con toBeInTheDocument

26 Jul, 2023 Programación

¿Es posible utilizar querySelectorAll con las pruebas de reacción de jest en lugar de seleccionar individualmente cada componente con querySelector y comprobar que estén en el documento con toBeInTheDocument?

Por ejemplo, probar un componente como este:

const SomeComponent = () => (
  <>
    <p id='one'>one</p>
    <p id='two'>two</p>
    <p id='three'>three</p>

)

De lo contrario, sería necesario escribir una prueba como esta:

import React from 'react';
import {render} from '@testing-library/react';
import '@testing-library/jest-dom';

describe('Some Component', () => {
  it('Should render all', () => {
    const {container} = render(<somecomponent></somecomponent>);

    const one = container.querySelector('#one');
    const two = container.querySelector('#two');
    const three = container.querySelector('#three');

    expect(one).toBeInTheDocument();
    expect(two).toBeInTheDocument();
    expect(three).toBeInTheDocument();
  });
});

Tengo una lista de numerosos elementos que está empezando a ser bastante extensa.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible usar querySelectorAll en pruebas de react con jest en lugar de seleccionar individualmente cada componente con querySelector y comprobar que estén en el documento con toBeInTheDocument.

    Aquí tienes un ejemplo de cómo podrías probar SomeComponent usando querySelectorAll:

    import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';

describe('Some Component', () => {
  it('Debería renderizar todo', () => {
    const { container } = render(<somecomponent></somecomponent>);

    const elements = container.querySelectorAll('p[id]');

    expect(elements.length).toBe(3);
    elements.forEach((el) => {
      expect(el).toBeInTheDocument();
    });
  });
});

    Esta prueba utiliza querySelectorAll para encontrar todos los elementos p con el atributo id y verifica si su cantidad es 3, luego itera sobre cada elemento y asegura que cada uno de ellos esté en el documento con toBeInTheDocument. Este enfoque es mucho más limpio y fácil de mantener cuando tienes muchos elementos que comprobar.

Comments are closed.