Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

queries returned by render are not scoped

Ouverte
  • Quelque chose ne va pas ?
#1,268 4 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
javascript, react
Domaine
frontend, testing-qa

Piste de recherche

Commencez par examiner comment render renvoie ses requêtes et comment within(container) lie les requêtes. Reproduisez ensuite l’exemple fourni, puis vérifiez que les requêtes de render recherchent uniquement dans le conteneur renvoyé, tandis que screen peut toujours rechercher dans l’ensemble du document. Les implications de breaking-change et de la release doivent être résolues avant l’implémentation.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

  • @testing-library/react version: 14.1.2
  • Testing Framework and version: Jest 29.7
  • DOM Environment: jsdom 20.0.3
Relevant code or config:
it('uses a consistent scope', () => {
  const MyComponent = () => {
    useEffect(() => {
      const separateElement = document.createElement('div');
      separateElement.textContent = 'hello';
      document.body.append(separateElement);
      return () => separateElement.remove();
    }, []);

    return (
      <div>
        <div>hello</div>
      </div>
    );
  };
  const { container, getByText } = render(<MyComponent />);

  within(container).getByText('hello'); // passes
  getByText('hello');                   // fails (finds 2 elements)
});
What happened:

The first test (within(container).getByText('hello')) passes, and the second (getByText('hello')) fails:

Found multiple elements with the text: hello

Here are the matching elements:

Ignored nodes: comments, script, style
<div>
  hello
</div>

Ignored nodes: comments, script, style
<div>
  hello
</div>
Problem description:

The container and queries returned by render should be consistent with each other: the queries should search within the returned container by default, to avoid pollution from other tests and libraries which attach elements to other parts of the DOM. For users who need to check the wider document, they can continue to use screen.

It is also worth noting that the documentation claims that the queries are "bound", which does not match the current behaviour (since they apply globally across the document).

Suggested solution:

It is possible to make a wrapper function in user-space which works around this, which should be easy to integrate into the core library:

export const renderScoped = (ui: ReactElement, options?: RenderOptions) => {
  const rendered = render(ui, options);
  return {
    ...rendered,
    ...within(rendered.container),
  };
};

This will be a potentially breaking change for users who currently rely on the queries not being scoped, so probably needs to be a "4.2" release.

Langage dominant
JavaScript
Étoiles
19.7k
Forks
1.2k
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de testing-library/react-testing-library

Toutes les issues de testing-library/react-testing-library

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.