TDD: JEST js part 2: testing

Read part 1: installing

Let’s create the test file and test if the component renders without crashing. ReactDom.render

//button.test.js
import React from 'react';
import ReactDom from 'react-dom';
import Button from '../Button.js';

it ("renders without crashing", () => {
     const div = document.createElement("div");
     ReactDom.render(<Button></Button>, div)
})

First, create a folder called __test__ because it’s universally used for testing in JS. The file name should be the `componentName.test.js` because when JS runs a test, it will look for .test

First we import react, then reactDom so we can render stuff, then import the component that we are testing, which is Button

it ("renders without crashing", () => {})

We want to make sure that this component render as it is so we will test that now.it means the button component. We will write call back function then write our test.

const div = document.createElement("div")

We will create a div using document.createElement.

ReactDOM.render(<Button></Button>, div)

Then we will try to render the div, attach to our component to that div.

So we will use ReactDOM, which is a rendering library. Then render the `button` in the dom element that we just created, to render it at div.

then test using below command.

npm test

It will look for the test file and execute.

voila !

1 passed 

Now let’s add the second test. EXPECTING prop text content

//button.test.js
import {render, cleanup } from '@testing-library/react'; 
import "@testing-library/jest-dom/extend-expect";

In the same button.test.js file, we will add a new react testing library, `render` from ‘@testing-library/react’, which is different from reactDOM render. We will use render function later. Import cleanupas well. This will allow the render to clean up after each test before it renders again.

it("renders button correctly", () => {
      const {getByTestId} = render(<Button label = "click me please"></Button>)
      expect(getByTestId("button")).toHaveTextContent("click me please")
})

We will use the `render` function using `testing-library/react`, Now we will pass the prop label, “click me please”. Then it will test the prop, label, “click me please”. When this renders, we can collect multiple information. We need to access data using the data testing id tag we created earlier.

Expecting the following, using getByTestId, which is data-testid “button”, we get the button tag. We are expecting the `button` tag to have a text content, “click me please”. If the Button tag has prob, that contains text, “click me please”, then it will PASS. If it doesn’t then it will fail.

3rd test : cleanup

it("renders button correctly", () => {
const {getByTestId} = render(<Button label = "save"></Button>)
expect(getByTestId("button")).toHaveTextContent("save")
})

what if we pass a different prop?

Let’s change the prop “click me please” to “save”. It will fail and the terminal will output, `Found multiple elements by [data-testid=”button”]`. It means that this third test is running at the same time as the second test. So in order to prevent that, after every single test, we will clean up. So let’s import `cleanup`

import {render, cleanup } from '@testing-library/react'

and add `afterEach(cleanup)` at the beginning of the first test.

4th test: snapshot testing

import the `renderer` function from `react-test-renderer`

import renderer from "react-test-renderer"
it("it matches snapshot 1", () => {
const tree = renderer.create(<Button label = "save"></Button>).toJSON(); 
expect(tree).toMatchSnapshot(); 
})

Use the rendererfunction then `create` a snapshot, Button component with prop called label with text, “save”. once the Button snapshot DOM is created, we will convert it into a virtual DOM object, JSON. Then save it inside an object called ‘tree’

When this line is run, it’s expecting the tree object to match the snapshot in the snapshot file.

if there wasn’t an object called tree, then this code will create a snapshot. (button.test.js.snap) If there is a tree already, then match it to the original snapshot.

button.test.js.snap

This Snapshot is useful because it will track and if there’s any changes in the Button.js file, it will fail, because the code is different from the original Button.js, which was snapshotted earlier in the snapshot.

If you change the original Button.js file, for example, add “hello” next to “hi” then the test will fail and show this on the terminal. The earlier snapshot recorded “hi” but current version of the file is showing “hi hello” instead of “hi” so “hi” is missing and “hi hello” is there.

Now all tests are passing! Congrats!

sources: https://www.youtube.com/watch?v=3e1GHCA3GP0