Consider a situation, You build out an entire application, and now you want to release it on the web so that other people can use it. But you are scared that your application may fail in some conditions, and your users may start complaining.
Some Bugs may reproduce, or some end cases may cause your application to fail. It might not affect you as a beginner, but in large-scale production applications, you can't only take the risk of your app failing when it goes live.
So how do you make sure this never happens to you...
The answer is Testing.
So what exactly is testing?
Testing is a line-by-line review of how your code is going to execute. You write some piece of code that executes the script you have written for your app and makes sure the results match the desired output in ideal condition.
Testing comes in handy when you make some updates to your code or when you contribute to open source, for example. After updating a piece of code, you can run a test to ensure that the update does not break functionality already in the application.
In specific, you test for end cases or boundary conditions that may or may not occur when a real-world user it.
How your application behaves when the user enters some invalid data; Or is there any security issue and things like that.
You can say that testing is an integral part of any development process. You just can't ignore it.
I know it can be tedious sometimes to write a piece of code that checks whether your previous written code works appropriately or not, but I guarantee once you get the hold of it, you will love the concept of testing.
Testing helps you:
- Save the time of manually checking each part of the application. Just write some piece of code and automate the process.
- Make sure a bug doesn't reproduce itself. Whenever you fix a bug, you can write some test cases so that it never repeats itself.
- Improve the flexibility of your code and makes it more maintainable otherwise, you would manually have to find the survey the whole code-base just to fix a small bug
And a lot more...
Lets quickly go over the types of testing:
1. Unit tests
Unit testing refers to testing individual pieces of your code or, as the name suggests, unit parts of your code to make sure the pieces fit together perfectly.
Talking specifically about React, unit tests typically do not require a browser. You test the rendering output. Like what happens when a state changs or a given set of input changes, and do the changes affect the DOM or not.
2. Functional testing
Functional testing is more focused on testing the behavior of our component.
For example, whether or not the component renders properly or not as an individual, the onClick function on a component works fine or not, or the Navbar shows the name of the logged-in person correctly.
Functional tests usually run in isolation (i.e., testing the component functionality without the rest of the application).
3. Integration testing
Integration testing tests the entire service of our application and attempts to replicate the experience an end-user would experience when using our application.
Integration testing is generally slower than the unit and functional testing, as it is quite hard to match a user experience.
There are many other terminologies that you may encounter like a smoke test and shallow rendering but let's keep things simple for this.
Introduction to Jest and Enzyme
Jest is a node-based test runner used for fast parallel running of tests in a node environment. It is one of the most used frameworks for testing purposes.
Jest focuses a lot on simplicity. It can be installed with npm or Yarn. It works excellent for React as well as other applications.
After installing it, What you do is you write some tests and then run the command npm test in a terminal window within your app directory. It will initialize Jest and start testing in watch mode, which will then automatically run tests whenever you make changes to associated files.
Enzyme is a library that is used to test React applications. It's designed to test components, and it makes it possible to write assertions that simulate actions that confirm whether the UI is working correctly.
Jest and Enzyme complement each other so well, so in this article, we will be using both.
There are other testing frameworks also such as Mocha, which you can give a try.
But for the moment, let's get started with setting up Jest.
Setting up jest
If you use Create React App for setting up any new react app, then you don't need to install it because it comes with Jest preinstalled.
If you want to install Jest manually, just type
npm install --save-dev jest
in the terminal. And in the package.json file, set up the command for running tests.
...
scripts: {
"test": "jest",
...
}
Writing your first test with Jest
Okay, now, all you need to do is create a file where you will write the tests.
But how does Jest know what is a test file?
There are generally two ways you tell Jest that this is a test file.
If any files in your directory have the name test, it's considered a test.
If your file has suffix .spec.js or .test.js, it is marked as a test file.
So, Jest scans through your directory looking for such files and runs the code inside them that's your tests.
Let's see some code in action,
Make a file called Home.test.js and all the following code to it
describe('Our first test', () => {
it('Multiplies numbers', () => {
expect(5 * 10).toEqual(50);
expect(20 * 50).toEqual(1000);
});
Let's understand this piece of code.
describe() is used to wrap up tests that are of a similar type, and you can describe what you are testing for or what this is the purpose of these groups of tests.
it() is used to define a single test. It describes what you are trying to achieve with that particular test or what the function does. You can also use the test() method in place of it.
expect() and .toEqual() is where we actually perform the test. We put the function inside expect(), which gets the actual result of the function, and the expected result goes in toEqual(). If both match, the tests pass, or else they fail.
Run the following piece of code with node test command. You will notice a beautiful table like the layout on the console, which gives you a lot of information related to the tests. For example: whether it passed or failed, failed at which line, the amount of time it took, and many other things as well.
For now, let's focus on PASS and FAIL. The above code is no doubt correct. but what if we pass something like this,
describe('Our second test', () => {
it('Multiplies numbers', () => {
expect(5 * 10).toEqual(25);
});
This will result in a failed test, and you will see the word FAIL flashing in the console.
Hurray, You wrote your first test.
Of course, real-world tests won't be this simple, but this will surely give you a general overview of what testing actually looks like and a brief introduction of Jest as well.
Jest is a very friendly framework. It tells you exactly where your tests failed and gave you inner insights as well.
Now, you can play around with Jest and start testing your javascript code.
If you want to try testing out React Component, then there is this Enzyme framework, making testing react components a lot easier.
Testing React Components using Enzyme
Enzyme doesn't come preinstalled with create-react-app, so you will have to install it using the command manually.
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
//or with yarn
yarn add --dev enzyme enzyme-adapter-react-16 react-test-renderer
Note- Installation of enzyme depends on the version of React you are using, here we will be using react-16
To use Enzyme, we have to configure the package that we just installed to use react, so make a file named setupTests.js in the src folder and add the following code.
It uses the adapter we just installed with the enzyme package.
// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
We can now use Enzyme for our tests.
Create a file with the name of the component you want to test and add .test.js after it.
Please write down the following code in it.
// MyComponent.test.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
describe("MyComponent Render Test", () => {
it("should render my component properly", () => {
const wrapper = shallow(<MyComponent />);
});
})
Once again, describe is used to describe the purpose of a group of tests, and the it() function specifies what a particular test is defined for.
The shallow() assertion method is a part of enzyme, shallow() is used to test the component it is provided, whether it renders properly or not. One thing to note here is that it ignores any child components that may be present in the component, so it is a type of unit test which tests a particular piece of code.
If you want to test out the children as well, use the mount() function instead, which performs an integration test on the entire component and its children.
This is the simplest example of testing a component using enzyme. The journey doesn't end here. You will probably need to know much other stuff before you start writing tests for real-world applications, but that was a good start.
If you want to learn more about testing and, in particular, testing in react, then do check out the documentation of Jest and React. You will find a lot of useful stuff there.
Further Reading
And Remember:
"Tests can't fail if there aren't any tests in the first place."
Don't go by this principle. 😂
Daily delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.
Top comments (0)