Testing is executing a system to identify any gaps, errors, or missing requirements contrary to the actual requirements.

Software testing is divided majorly into 3 categories:

• Unit Testing: Testing a single function

• Integrating Testing: Testing a function that calls a function

• End to End Testing: validating a DOM (i.e. we check if everything is in sync)

In this blog, let's focus on Unit Testing. Why? Because it is easy to implement and very commonly used.

Basic setup

Create a new React app with the code block below:

npx create-react-app react-testing

To show you guys how to test in react we are going to be testing a specific component that is called a counter.

You will see over here:

Start the react app using this command:

npm start

The result of the above app will look like this:

Simply, it's just a counter app, despite being a simple app that is just a count it's pretty interesting to test because it introduces a lot of topics that you need to understand when testing so this is a good example.

You can see our component is pretty simple is called a counter and it's just a component that it creates a state called count which starts with an initial value of 0 we have a couple of buttons over here that do some stuff to the count right.

So we have a button that calls the increment() function which increments the value of the count similarly decrement() which decreases the value.

This would be a good thing to test because sometimes this happens a lot as a developer think our code works but when you deploy the code millions of people will try to use this code in millions of different ways which eventually one of the ways they use it will cause issues, so want to be testing all the edge cases so that you sure that what you wrote covers every possible use case.

So unit testing is important.

How would I test a component like this in react?

setUpTests.js the main purpose is to import as you see jest/dom will allow us to a lot of different interesting functions when we are trying to test.

Whenever you have a new test you want to write you do is you just create a test file with the name of the file so Counter.test.js

Import Counter component in Counter.test.js

describe() - Describing the Counter component, is one of the ways to start a test in react.

it() - what you are describing is put over here. Describe the message write whatever makes sense to you and write exactly what is happening in this test.

render() - Whenever we are describing an actual test and testing to see if all the stuff we want to test works we need to use a function from the react testing library called the render() function.

const countValue = Number(getByTestId("count").textContent);

testContent - We can access the value present in the element by using this and this will come out as a string.

Running tests

To run the test use this command:

npm test

The content we are getting is not a number and zero is a number. So convert that text into a number.

Now our test will pass because we are comparing two numbers.

So this is great we just wrote our first test which is amazing.

Now, let's test the increment button:

To test the increment button would have to access that increment button:

To increment the button we have to use getByRole() because for this no Id is present.

const incrementBtn = getByRole("button", { name: "Increment" });

We have multiple buttons inside our application so which one is required can be identified by specifying by grabbing the name and passing Increment.

fireEvent.click(incrementBtn);

fireEvent() - we can emit any kind of user event that we can test.

Click on the button to test if it is 0 before and then click on the button to become 1

Then run the test:

npm test

Similarly, you can perform testing for the Decrement button also:

Outro ❤️

Testing is a big and fascinating topic. There are many types of tests and many libraries for testing.

The purpose of the blog is to create awareness about testing in react. To learn further it is recommended to go through Jest's Official Documentation and React Testing Library Documentation.

In case you have some questions regarding this blog or want to discuss something feel free to connect with me on LinkedIn 💙