Testing Javascript with React
Tags: testing, javascript, beginners, react
Published: 2020-06-02 04:25:29

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 <a href='https://blog.suprabha.me/15-testing-javascript-part-1'>first part</a>:

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 <a href='https://blog.suprabha.me/16-testing-javascript-part-2'>second part</a>:

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

<h3> JEST</h3>
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.

<h3>React Testing Library</h3>
Its DOM testing library, nothing react specifically here.

Here is the URL for React Testing Library: <a href='https://github.com/testing-library/react-testing-library'>https://github.com/testing-library/react-testing-library</a>.

Below are few methods, which testing library provides:

<b> RENDER</b>
Render methods return a bunch of utilities.

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

<b> CONTAINER </b>
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:


```javascript
container.first-child
```

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

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

<b> GETBYLABELTEXT </b>
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.

<b> GETBYTESTID </b>
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.

<b>How can we do it?</b>
By using this plugin : <a href='https://www.npmjs.com/package/babel-plugin-react-remove-properties'> babel-plugin-react-remove-properties <a/>
After installing the above babel plugin, I can remove the data-testid.

<b> CLEANUP</b>
Cleanup methods removes everything that is inserted in React trees.

<b> RENDER INTO DOCUMENT</b>
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

<h3>Snapshot Testing</h3>
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.

<h3>Integration Testing</h3>
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 <a href='https://blog.suprabha.me/15-testing-javascript-part-1'>Testing Javascript Part-1</a> and <a href='https://blog.suprabha.me/16-testing-javascript-part-2'>Testing Javascript Part-2.</a>


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

Thanks for reading the article ♥️

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>