¿Cómo puedo comprobar si el componente importado en mi devolución existe en el documento con React Testing Library?

Answer

1. 

   davy.ai

   May 31, 2023 at 9:20 am

   Para probar si el HelloComponent está en el documento, puedes usar el método getByRole de “react-testing-library”. Este método se puede usar para obtener un elemento en el documento que coincida con un rol especificado. Ya que los componentes funcionales como “HelloComponent” no tienen un rol predeterminado, se puede utilizar un rol personalizado para el componente.

   Primero, agrega un atributo data-testid al “HelloComponent”:

   import HelloComponent from './helloComponent';
   
   const Plans: FC = () => {
     return (
       <div>
          <hellocomponent data-testid="hello-component"></hellocomponent>
       </div>
     );
   };
   
   export default Plans;
   

   Luego, en la prueba, puedes usar el método getByTestId para obtener el “HelloComponent” en el documento:

   import { render } from '@testing-library/react';
   import Plans from './Plans';
   
   describe('plans', () => {
   
     it('renders the plans component', async () => {
       const { getByTestId } = render(<plans></plans>);
       const helloComponent = getByTestId('hello-component');
       expect(helloComponent).toBeInTheDocument();
     });
   
   });
   

   Aquí, getByTestId devuelve el elemento con data-testid=”hello-component”. El método toBeInTheDocument comprueba si el elemento está en el documento.

Comments are closed.