Quiz Yourself on RTL Queries
This quiz will test what you have learned in this chapter.
We have the following component:
export function GoTo({ place, href }) {
return (
<a href={href} title={`Go to ${place}`}>
{place}
</a>
);
}
The following test verifies that the correct text is rendered when the place
prop is passed:
test("Should render element with correct text when place passed", () => {
render(<GoTo place="test" href="https://somewhere.com" />);
expect(screen.findByText("test")).toBeInTheDocument();
});
The test is failing unexpectedly. What is the problem, and how could it be resolved?
toBeInTheDocument
isn’t the matcher that should be used. We should use the not.toBeNull
matcher instead.
We shouldn’t use the toBeInTheDocument
matcher. We should use the toBeNull
matcher instead.
The findByText
matcher returns a promise to an element rather than an element. The getByText
matcher should be used instead.
The findByText
matcher returns a promise to an element rather than an element. The queryByText
matcher should be used instead.
Get hands-on with 1200+ tech skills courses.