Rendering Components in React Testing Library(RTL)
It is time that we learn how a react component is rendered using RTL for your tests. In the codes below, we implement RTL on the following App component.
import React from 'react';
const heading = 'Hello Ninja!';
function App() {
return <div>{heading}</div>;
}
export default App;
Now we test it in the App.test.js file
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
describe('App', () => {
test('renders the App component', () => {
render(<App />);
screen.debug();
});
});
Finally, we run the test using the npm test command. This command will allow us to see the HTML output of the test application.
The screen.debug() method used in the above code is used as a shortcut for console.log(prettyDOM()) as it supports debugging the document, a single element, or an array of elements.
Whenever we write a test for a component in the React Testing library(RTL), we can render the component first and then debug what is visible for RTL’s renderer in the test. This allows us to write tests more confidently.
Output:
<body>
<div>
<div>
Hello Ninja!
</div>
</div>
</body>
Selecting elements in React Testing Library(RTL)
After rendering our React component, RTL allows us various search functions to grab elements. These elements can later be used for assertions or for user interactions.
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
describe('App', () => {
test('renders the App component', () => {
render(<App />);
screen.getByText('Search:');
});
});
After using the screen.debug() function. It is clear to observe what all elements are present in the final output. When we are well versed with the HTML structure of our application, we can select elements using RTL's screen object function easily. The selected elements can later be used for user interactions or assertions.
The getByText function accepts a string as an argument.
Similar to getByText function the React testing library(RTL) provides the following functions to select an element in the final HTML.
- getByText
- getByRole
- getByLabelText
- getByPlaceholderText
- getByAltText
- getByDisplayValue
- queryBy variants:
- queryByText
- queryByRole
- queryByLabelText
- queryByPlaceholderText
- queryByAltText
- queryByDisplayValue
To Find elements by variants.
- findByText
- findByRole
- findByLabelText
- findByPlaceholderText
- findByAltText
- findByDisplayValue
FAQs
-
Does React testing library use Jest?
The React Testing Library(RTL) only provides methods that help writing test scripts. Hence, we still require a JavaScript testing framework like Jest to run the test code.
-
Is the Jest and React testing library the same?
Jest provides a great iteration speed and powerful features such as mocking modules and timers that offer more control over how a code executes. React Testing Library, however, is a set of helpers that lets us test React components without relying on their implementation details.
-
Who created React testing library?
The React Testing Library(RTL) was developed by Kent C. Dodds, a React educator, and an open-source developer.
-
How does React testing library(RTL) render?
By default, React Testing Library creates a div and appends that div to the body of a document. This is where the React component will be rendered.
-
What is the React testing library?
React Testing Library(RTL) is a testing utility tool that is used to test the actual DOM tree rendered by React in the browser. This library aims to help write tests that resemble how an end-user would use an application.
Key Takeaways
In this article, we have extensively discussed the React Testing Library(RTL) and its various features.If you are Preparing for interview and don't know where to start, we have got you covered, check out our expert curated courses on our website, You can also check out Coding Ninjas Studio to practice frequently asked interview problems. We hope that this blog has helped you enhance your knowledge regarding Debugging tests in React and if you would like to learn more, check out our articles. Do upvote our blog to help other ninjas grow. Happy Coding !!
306+ registered