React Testing Library – Learning the syntax and writing our first test

Hi in this post about React Testing Library (RTL) we are going to learn the basic syntax of test in RTL.

I have a component called MyList and the test file of this component, look:

Nice, now in the terminal instead of run the react project with “npm start” we are going to type “npm test” this will start running Jest in watch mode.

I pressed enter and this information appears in the terminal:

Then I typed “a” to run all the test files that our application have, so in this case after I typed “a” this information below appears and means that I have only 1 test in my entire React application and also the green color indicates that my test PASS!

Cool, now let me explain the syntax of a basic test:

This is our testing code for “MyList” component and the file is called MyList.test.tsx

// Dependencies
import { render, screen } from '@testing-library/react'

// Mock data
import { data } from './data/data'

// Component
import MyList from './MyList'

// Unit test
test('Rendering item of list', () => {
  render(<MyList data={data} />)

  const listItem = screen.getByText(/testing/i)

  expect(listItem).toBeInTheDocument()
})

Ok, I’m going to explain the above example line by line:

First we need to import the dependencies in this case the render method and the screen global object that are from React Testing Library (RTL):

// Dependencies
import { render, screen } from '@testing-library/react'

Then this mock data, is just because my component need a mock data to work, that’s!

// Mock data
import { data } from './data/data'

Nice, after that we need to import our component in this case MyList React component:

// Component
import MyList from './MyList'

Ok, now Im creating the test with the test() method and inserting a description for that test, in this case ‘Rendering item of list‘, cool, you can insert the description that you prefer and makes sense for you here:

// Unit test
test('Rendering item of list', () => {})

Coo, in the next line I’m using the render() method that is from RTL this method create a virtual DOM for whatever JSX you give it as argument.

In this case is our JSX for MyList component:

render(<MyList data={data} />)

Ok, now we need to access to that virtual DOM once has been render, so we can have access to the DOM with the screen global object and running it’s method called .getByText() and this method is going to find a element in the virtual DOM base on whatever text is displayed as argument.

If you see the argument that I’m passing is a regular expression /text/i where the i means that all the letters could be either uppercase or lowercase.

But if you don’t want to use regular expression then you are more than welcome to use a regular string as argument.

const listItem = screen.getByText(/testing/i)

This means that we are looking for this element 🙂

Finally we have the assertion; this assertion it was causes the test to succeed or fail.

Note: I’m going to write more posts about the assertion topic.

We are testing that the <Box>testing<Box> is in the DOM:

expect(listItem).toBeInTheDocument()

Cool! this test PASS because the element <Box>testing<Box> it is in the DOM!

By Cristina Rojas.