React and Testing (a slightly comprehensive guide, maybe)

rasmusWU — Fri, 19 Feb 2021 17:16:54 +0000

Introduction

We as coders, old or new, should always strive for our code to be as close to perfection as possible, and if not that, at least make it functional. This is, of course, easier said than done, as coding, depending on the functionality, can take an enormous amount of effort, so using the tools at our disposal becomes essential.

Testing is one of, and probably the most important, of those tools, and luckily for us, testing is easy and fast in React.

React

React is a framework made for efficient navigation, without full page-loads. This means our sites will be faster on all devices. This is especially beneficial for slower devices, such as mobile networks, or weak home-signals.

React is also good for us developers, as it lets us split our apps/sites into components, that can be used, reused, and manipulated specifically to suit our needs.

Creating a React app

Creating a React app is very simple. Once you've installed Nodejs onto your computer, and opened Visual Studio Code, before even having made any files, you should open your terminal, and type this command (period included. Otherwise it won't work):

npx install create-react-app .

You can then, optionally, remove all the non-essential parts of the React app, and only keep the absolute minimum. If you choose to do this, feel free to erase these files:
favicon.ico
logo192.png
logo512.png
manifest.json
robots.txt
App.test.js
logo.svg
reportWebVitals.js
setupTests.js
Also make sure to remove all references to these files, as React is very fragile, and will crash if it has trouble finding a file. The files that reference the removed files are:
App.js
index.js
And with that, you have a configured a React app. Type the command below into the terminal to test your React app!

npm start

Making Components

Making components is simple as well. For this showcase, I'll call my files 'comp1'.
Make a new folder titled 'components' in your src folder. This is optional, but highly recommended. Afterwards, make these two files in the components folder:
Comp1.js
Comp.css
It is also recommended that you change the file associations in VSCode settings to match the React format, by typing "*.js" under item, and "javascriptreact" under value.

Once Comp1.js is made, import your css, with this line of code:

import './Comp1.css';

Then, make a function with one parameter (I'll call it header), and export it. I'm calling it Comp1, but anything goes. You should also make a return statement, containing a HTML element, and give it a class (IMPORTANT: since it is javascript, and not HTML, you need to call 'className' and not 'class' like in regular HTML).
You also wanna call the parameter by typing it within a couple of braces, as shown below, in my h1 element.

export default function Comp1({header}) {
    return (
        <section className="Comp1">
            <h1>{header}</h1>
        </section>
    )
}

Once that's done, go into your App.js, and import your component, like you would in normal javascript.

import Comp1 from './components/Comp1';

Once you've imported the component, you can insert it anywhere in the HTML, as many times as you want. In my case, I deleted all the contents of the div in App.js, and replaced it with my component.
The parameter for the header is also gonna get used now, as I can insert whatever text I want into its place, like the example below.

function App() {
    return (
        <div className="App">
            <Comp1 header="Hello"/>
            <Comp1 header="World"/>
        </div>
    );
}

You've now made a component, and imported it. Now it's time for testing.

Testing

Testing is, of course, very important. I don't need to explain that, do I?
Anyways, the test I'll show off is about testing whether elements exist in the document, without actually checking on the site itself.

This is not particularly useful for such a basic app, but it's immensely useful for bigger projects to quickly run through all the components that need to be tested, without rendering them all out on a website.

Making a test

For this example, I'll make a test-file in the components folder like this:
Comp1.test.js
In the test-file, import the component you wanna test like any other import, as well as { render } from the React testing-library like I have done.

import Comp1 from './Comp1';
import { render } from '@testing-library/react';

After you've done that, it's time to actually set up the test. It'll all take place within a single 'test' function, so start off by making that, and putting a string into the parenthesis. The string will describe what the test is about.

test("If my component is functioning as intended")

After the message, we need to input what our test should actually test, so add a comma after the string, then make a function.

test("If my component is functioning as intended", function() {

})

Inside this function, make a variable like this:

var { getByText } = render(<Comp1 header="test" />);

What it does, is it will render a Comp1 component, with the parameter set as "test". What you input into your parameter doesn't matter, as long as it's a string.

Next line, make an 'expect' expression, and input the 'getByText' as a parameter within the 'expect' statement. After the getByText, put a parenthesis, with the string from the parameter above, enclosed by a couple of slashes, then followed by an 'i'. This is what it looks like:

expect(getByText(/test/i));

This is what your function/document should look like at this point:

import Comp1 from './Comp1';
import { render } from '@testing-library/react';

test("If header is displaying properly", function() {
    var { getByText } = render(<Comp1 header="test" />);
    expect(getByText(/test/i));
});

This will test whether the component exists on your page or not, and whether the text within the parameter matches what you've specified in your getByText function.
To activate the test, just input the line below into the terminal, and it'll run all your tests. In our case, one.

npm test

If all is right, it should pass the test. If not, look back in the blog and try again. You might have made a typo or other mistake along the way.

Conclusion

And with that, you've made a React app, a component with a parameter, and tested said component. Now it's just time to expand and get even more out of those tools. Get coding!

DEV Community: rasmusWU