15
votes

Bibliothèque de tests React - vérifier l'existence d'un div vide

Je teste un composant où si ItemLength = 1 , le render renvoie null .

const { container, debug } = render(<MyComp ItemLength={1} />);

Lorsque j'appelle debug() dans mon test, il affiche un <div /> . Comment vérifier que le composant renvoie un div vide dans mon test?

reactjs react-testing-library

1 commentaires

getByText(container, (content, element) => element.tagName.toLowerCase() === 'div') essayez d'utiliser getByText pour faire correspondre l'élément TagName

5 Réponses :

1
votes

Puisque vous essayez de tester un div vide, vous pouvez essayer de le tester en faisant correspondre le nœud (une autre solution possible est le nombre de nœuds rendus)

getByText(container, (content, element) => element.tagName.toLowerCase() === 'div')

1 commentaires

je ne sais pas comment cela fonctionnerait. le passage du container en génère une erreur car il attend une string

25
votes

Vous pouvez utiliser toBeEmpty de jest-dom :

const { container } = render(<MyComp ItemLength={1} />)
expect(container.firstChild).toBeEmpty()

2 commentaires

Il semble que toBeEmpty soit obsolète depuis jest-dom 5.9.0.

Comme l'indique @TheTFo ci-dessus, cette solution ne semble pas fonctionner au moment où j'écris ceci fin 2020. La réponse de Karolis Grinkevičius ci-dessous fonctionne pour moi.

19
votes

Les éléments suivants devraient également fonctionner sans étendre les attentes des plaisanteries:

import { screen } from '@testing-library/react';

...

render(<MyComp ItemLength={1} />);

const child = screen.queryByTestId('data-testid-attribute-value');

expect(child).not.toBeInTheDocument();

Mise à jour: la nouvelle façon en 2020

const { container } = render(<MyComp ItemLength={1} />)
expect(container.firstChild).toBeNull();

0 commentaires

2
votes

toBeEmpty - lancer un avertissement, vous devez utiliser toBeEmptyDOMElement place

    const pageObject = cretePage(<UserResources />, appState);

    expect(pageObject.noContent).toBeInTheDocument();
    expect(pageObject.results).toBeEmptyDOMElement();

0 commentaires

0
votes

.toHaveLength (0) devrait également fonctionner sans l'extension jest-dom

const wrapper = render(<MyComp ItemLength={1}/>);
expect(wrapper.container.innerHTML).toHaveLength(0);

0 commentaires