Testing Javascript with React

This blog is specially for beginners (I have written after learning from Frontend masters). I have separated this course in two parts:

These are the topics which has been covered in the first part:

1. JEST Setup
2. Import/Modules
3. JestDOM
4. Handling Dynamic Imports
5. COVERAGE
6. Watch Mode
7. Monkey Patch

And below are the topics which has been covered into the second part:

1. React Testing Library
2. Snapshot Testing
3. Integration Testing
4. Cypress

JEST

Jest is a JavaScript test runner, that is, a JavaScript library for creating, running, and structuring tests.

Test cases will be in this form:

1. Arrange
2. Act
3. Assert

First create a container where we have to see the value, to render things(as DOM). Then, act accordingly and then check or validate.

React Testing Library

Its DOM testing library, nothing react specifically here.

Here is the URL for React Testing Library: https://github.com/testing-library/react-testing-library.

Below are few methods, which testing library provides:

RENDER
Render methods return a bunch of utilities.

const {conatiner} = render (<ComponentName />)

CONTAINER
When we created const container = document.createElement(“div”) in previous examples in Part-1, that’s what here this container means.
If we need to render the first div element from the component then simply we can get by:

container.first-child

UNMOUNT
We can use unmount to avoid memory leak. After running Unmount, All the reference of component will be removed.

const {conatiner} = render (<ComponentName />)
unmount()

GETBYLABELTEXT
This the best way to get form elements.

So, here we can look up the label and if the username exist, It can be trackable else it won’t be trackable.

GETBYTESTID
Its a shortcut for container.querySelector([data-testid="${yourId}"]).

We should prefer using test-id instead of class or ID’s, as Classes and ID’s get changed overtime. Hence, its better to use test-id. By using test-id we can find the element in the DOM.

If we want to remove the test-id from production(for reducing page size), then we can remove it via plugin in babel.

How can we do it?
By using this plugin : babel-plugin-react-remove-properties
After installing the above babel plugin, I can remove the data-testid.

CLEANUP
Cleanup methods removes everything that is inserted in React trees.

RENDER INTO DOCUMENT
It is very small API on top of render and it append to the container to the document body.

So, if there will be any click button, then we can simply use click event for the same

Snapshot Testing

It’s a mechanism where we can take some value, serialise into a string and then compare it in the future for our future tests run.

If you want to update the test case then just press U in terminal where test is running. Just check the updated snapshot file should not empty

custom snapshot serialiser: It can take what jest wants to snapshot and based on some information, it can remove things.

If we’re using CSS in JS, then all the CSS that’s being generated as we are rendering things out. Here we are using glamorous. So, snapshot serialiser says, glamour what are the CSS you have generated if we were running in real browser? Based out of what’s in the rendered DOM, I am going to insert that CSS above the rendered DOM.

So, our snapshot includes both HTML and CSS together.

Integration Testing

Integration Testing is for page level testing where we can write all the test cases.
I hope you find this article helpful. I have added the above topics with example in Testing Javascript Part-1 and Testing Javascript Part-2.

const {conatiner} = render (<ComponentName />)

Thanks for reading the article ♥️

🌟 Twitter

👩🏻‍💻 Suprabha.me

🌟 Instagram