Es gibt zwei Möglichkeiten, Abfragen zu verwenden react-testing-library.
Sie können entweder die von zurückgegebenen Abfragen verwenden render Methode:
import React from 'react'
import { render } from '@testing-library/react'
...
const { getByText } = render(<div>Foo</div>)
expect(getByText('Foo')).toBeInTheDocument()
Oder Sie können das verwenden screen Objekt:
import React from 'react'
import { render, screen } from '@testing-library/react'
...
render(<div>Foo</div>)
expect(screen.getByText('Foo')).toBeInTheDocument()
In der Dokumentation gibt es jedoch keinen Hinweis darauf, welche Option die beste ist und warum.
Kann mich jemand aufklären?
Die neueste empfohlene Option von react-testing-library Autor Kent C. Dodds sich selbst ist zu nutzen screen.
Der Vorteil der Verwendung screen ist es nicht mehr nötig, das aufzubewahren? render Rufen Sie die Destrukturierung auf dem neuesten Stand auf, wenn Sie die benötigten Abfragen hinzufügen/entfernen. Sie müssen nur tippen screen. Den Rest erledigt die magische Autovervollständigung Ihres Editors.
Die einzige Ausnahme hiervon ist, wenn Sie das festlegen container oder baseElement was Sie wahrscheinlich vermeiden sollten (ich kann mir ehrlich gesagt keinen legitimen Anwendungsfall mehr für diese Optionen vorstellen und sie existieren derzeit nur aus historischen Gründen).
Quelle: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen
screen wird bereitgestellt von @testing-library/domwelches ist was @testing-library/react darauf aufgebaut ist. Bei Verwendung des screen Methoden werden sie innerhalb des HTML abfragen <body> Element, wie im beschrieben Dokumente:
Da die Abfrage des gesamten document.body sehr häufig vorkommt, exportiert die DOM Testing Library auch ein Bildschirmobjekt, das jede Abfrage enthält, die vorab an document.body gebunden ist
render() ist nur drin @testing-library/react. Es gibt ein ähnliches Objekt zurück screen und standardmäßig werden die Abfragen auch an die gebunden <body>. Standardmäßig gibt es kaum Unterschiede, Sie können das Verhalten jedoch anpassen Übergeben von Optionen.
Das können Sie zum Beispiel Geben Sie ein Element an anders als die <body> intern abfragen und sogar bereitstellen können benutzerdefinierte Abfragemethoden.
Um Ihre Frage zu beantworten, welches das Beste ist, würde ich verwenden sagen render() ist besser, weil die options Machen Sie es flexibler, aber um das zu zitieren Dokumente:
Sie müssen nicht oft Optionen angeben
Dennoch würde ich es vorziehen, die von bereitgestellten Methoden zu verwenden render()denn wenn Sie sich jemals dazu entschließen, Optionen hinzuzufügen, müssen Sie nicht daran denken, alle Ihre Abfragen zu ändern.
