We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

You will be redirected back to this page right after signin

Blog hero image

Beginners' Introduction to React Testing

King Somto 27 May, 2021 | 5 min read

Being a software developer the need to write code and deploy working code to production quickly and safely is needed especially on products that have crazy deadlines and delivery schedules. And it's a known fact that things do break!

No matter the many years of experience one has things get complicated and a change made at some part of the code base like the way a function appends data to an object or processes a text could cause a bug in the system that could take days before an engineer can fix it, the need to monitor our codebase to make sure changes made to it do not affect the way the code base works currently is why we have tests.

Intro to testing

Creating software to solve problems or perform a task in a structured way is software engineering, creating/writing tests is a way to make sure that the programs developed work in that structured way and do not break regardless of the changes made to the codebase over time, it's a good way of being sure that different developers working on a single code base don’t create problems in the codebase.

Why testing

Apart from the obvious reasons stated above, the writing test has a lot more advantages in the software development cycle.

  • Helps you see issues with your codebase:

I've had occurrences that after working on my code base and I start writing my test, I realize that my function wasn't implemented in the best possible way and would be prone to errors in the future.

  • Saving time on debugging

Running tests helps you make sure your codebase is working before entering production; this can save a lot of time in development.

  • Confident your code won't break on production

Test Cases

A test case is a set of commands executed by software to verify that a particular function or feature is working correctly the way it was designed to function, this could contain test data, and conditions developed for that particular scenario or feature.

What to test

So what is meant to be tested? Basically, a test should be run to check the functionality of the app, building on our previous point. Running the test should give you the confidence that the app still functions the same way it intended while pushing to production, even after making changes to different parts of it.

Testing in React

Testing in React is done by making use of libraries, one of them being called ReactTestUtils, it makes it easier to test React components.

Example

So let's look at a little example by testing a Button Component and see if it works.

Join our newsletter
Join over 111,000 others and get access to exclusive content, job opportunities and more!

A simple Component

import React from 'react'
 
export default function Button() {
   return (
     <Button>
         Hey i'm alive
     </Button>
   )
}

Screenshot 2021-05-06 at 02.27.27.png

Now to test the component we have to create our test file.

Opening up our folder root directory

mkdir test && cd test && touch simple.test.js

The above command creates our test file.

Now we paste the following inside our file

Test Scenario 1

This simple test is meant to check if our component was rendered perfectly

Simple.test.js

import Button from './components/button';
import { render, screen } from '@testing-library/react';
test('render the button Component', () => {
  render(<Button />);
  const linkElement = screen.getByText('Hey i am alive');
  expect(linkElement).toBeInTheDocument();
});

The test above checks if the component can be rendered by checking if the component contains some preset Text.

Let's break down the code.

import Button from './components/button';
import { render, screen } from '@testing-library/react';

Importing the needed tools we need from our library plus the component we are testing.

test('render the button Component', () => {
 
....
 
});

This part of the code is where we describe our test and what it does, and in the callback function, we declare our codebase.

const linkElement = screen.getByText('Hey i am alive');
 expect(linkElement).toBeInTheDocument();

This part of the code gets the content from the page and checks if that content is what we are expecting.

Running

npm run test 

Screenshot 2021-05-06 at 03.22.08.png

Generates this, here we can see our test has been running and we can count it as passing or passed.

Test Scenario 2

Now we have been able to write our first test to see if a component has rendered, now we can move up and test components that have a bit of logic inside them.

Our next example involves us passing two variables and setting the content to the sum of the two numbers.

Now let's make the edits to our components.

import React from 'react';
 
export default function Button({ number1, number2 }: any) {
 const [total, setTotal] = React.useState(0);
 return (
   <div>
     <button
      data-testid='button'
       onClick={(e) => {
         setTotal(number1 + number2);
       }}
     >
       Adds 2 number {number1} and {number2}
     </button>
 
     <p data-testid='total' > The total is : {total} </p>
   </div>
 );
}

Screenshot 2021-05-06 at 13.18.58.png

Now we can test the component to see if the Button Component works the way it was meant to.

Screenshot 2021-05-06 at 03.22.08.png

Let's go through our codebase and see what each line does.

 const component = await render( <Button number1={3} number2={3} />);

We declare our component and set the number1 and number2 props.

 const total =  component.queryAllByTestId('total')[0]
 

We need to get the object of the

tag with the testId

 const button =  component.queryAllByTestId('button')[0]
  

We need to get the object of the button tag with the testId

 button.click()
 

We need to simulate the click event by calling the click function

expect(!!getByText(total, `The total is : ${3+3}`, { exact: false }) ).toBe(true)
 

Now after clicking the button we are gonna expect the text to be The total is 6. The test passing means that the code works the way it's meant to.

What if something changes

John is a new engineer coming into the company and feels like making some changes to the codebase lets see what he does.

import React from 'react';
 
export default function Button({ number1, number2 }: any) {
 const [total, setTotal] = React.useState(0);
 return (
   <div>
     <button
      data-testid='button'
       onClick={(e) => {
         setTotal(number1 - number2);
       }}
     >
       Adds 2 number {number1} and {number2}
     </button>
 
     <p data-testid='total' > The total is : {total} </p>
   </div>
 );
}

Now we change

 setTotal(number1 + number2);
 

To

 setTotal(number1 - number2);
 

Let's see how that affects our codebase

Screenshot 2021-05-06 at 15.59.31.png

Now we see that our test is failing because our new engineer changes make the logic of the codebase faulty.

So changes are made to the codebase to revert it to its previous version and the test runs again

Conclusion

Let's walk through what we’ve learned so far, testing is programmatically checking if the code base still works after changes made to our codebase by either us or other engineers.

Testing with react is done by tools that make it easier to perform this test, we simply mock the app functionality and expect it to create an expected result or outcome doing this ensures our code works perfectly.

Discuss this article on

Author's avatar
King Somto
I really dont know much but am willing to try and learn

Related Issues

Concordium / Testnet3-Challenges
  • Started
  • 0
  • 1
  • Intermediate
    Concordium / Testnet3-Challenges
    Concordium / Testnet3-Challenges
    • Open
    • 0
    • 0
    • Intermediate
      Concordium / Testnet3-Challenges
      Concordium / Testnet3-Challenges
      • Open
      • 0
      • 0
      • Intermediate
        Concordium / Testnet3-Challenges
        Concordium / Testnet3-Challenges
        • Open
        • 0
        • 0
        • Intermediate

          Get hired!

          Sign up now and apply for roles at companies that interest you.

          Engineers who find a new job through JavaScript Works average a 15% increase in salary.

          Start with GitHubStart with Stack OverflowStart with Email