This is Part III of my eight-part series: Using Jest and Testing Library with React Native. In this series, we discuss testing your React Native applications with Jest and Testing Library.
Seriers Outline:
- Part I: Setting Up
- Part II: Writing the First Test
- Part III: Testing for an Element That Isn’t Present – Current Article
- Part IV: Button Testing
- Part V: Testing Styles of a Component
- Part VI: Functional Testing
- Part VII: Further Helpful Information
In the last installment (Part II), we walked through creating and executing our very first test. With that out of the way, let’s move on to something slightly more complicated.
Elements that cannot be found typically are elements that are initially hidden. In this post, we’ll cover how to test for an element or component that isn’t found originally in App.js.
Testing for Text That Isn’t There
Before we begin, you do not need to change anything in App.js. Simply open it up, and add these new lines of code:
const notFoundText = 'Not found text';
const {toJSON, getByText, queryByText} = render(<App />);
const notFoundTextElement = queryByText(notFoundText);
expect(notFoundTextElement).toBeNull();
Here is the updated code for the test:
//...
describe('App', () => {
it('should show hello world', () => {
const helloWorldText = 'Hello World!';
const notFoundText = 'Not found text';
const {toJSON, getByText, queryByText} = render(<App />);
const foundHelloWorldTextElement = getByText(helloWorldText);
const notFoundTextElement = queryByText(notFoundText);
expect(foundHelloWorldTextElement.props.children).toEqual(helloWorldText);
expect(notFoundTextElement).toBeNull();
expect(toJSON()).toMatchSnapshot();
});
});
With these things added, we can now run the tests!
You should see this test pass just like our first test did, but you’ll notice that there were a few changes. We added a new variable (notFoundText), extracted new values from render and queryByText, and searched for 'Not found text' with queryByText. Additionally, we set it so that testing notFoundTextElment will be null.
The difference between getByText and queryByText is that getBy expects to find a value. If one is not found, it will throw an error. queryBy, on the other hand, doesn’t expect a value, so it can be used to test if something is null or when you’re having trouble using getBy.
Also different from the first test, in this test, we are not drilling down to props.children of notFoundTextElement. This is because it can’t find an element with that text. If we console notFoundTextElement, we should see that it’s null.
Testing a Dynamic Component
Let’s imagine we have a component that is injected sometime during run time. This means that we won’t see it in App.js until an action occurs that causes it to show up. To test for this dynamic component, we can use a testID. We’ll go over testID in more detail in a future article.
For now, let’s add a test using testID and dynamicComponent.
Add this test to App.test.js:
//...
describe('App', () => {
it('should not find a dynamic component', () => {
const {queryByTestId} = render(<App />);
const notFoundDynamicComponent = queryByTestId('dynamicComponent');
expect(notFoundDynamicComponent).toBeNull();
});
});
queryBy is not specific to text or testID, so anything we can use getBy for, we can also use for queryBy. Within Testing Library’s Queries, we can see different examples of both getBy and queryBy.
Summary
And that’s that! In this post, we covered exactly how to write and execute a test that tests for text AND dynamic components that are not present in App.js. We also walked through a very brief, surface-level introduction to queryBy – more on that later.
Stay tuned! In our next tutorial, Part IV, we’ll go over testing buttons.
[Editor’s Note: Never miss a post by subscribing to receive new blogs by email. No spam, opt-out anytime.]
