arc12420/unit-testing-mini-new

Project Summary

In this project, we'll learn how to unit test JavaScript files and React components using Jest. Jest is a unit testing framework that was developed by Facebook. create-react-app automatically adds jest to any project so you won't need to manually add it, but in any other project that you are spinning up from scratch you will want to install it.

Jest download

Step 1

Summary

Setup

Instructions

• Fork and clone this repo
• run npm i

Step 2

Summary

In this step we will install React Testing Library which is a utility library that helps us to test our React components.

Instructions

• Run npm install --save-dev @testing-library/react

Note: In newer versions of create-react-app, you will not need to install this manually.

Step 3

Summary

In this step, we will create the folder and a file for our unit test.

Instructions

• In the src folder create a folder called __tests__
  • Jest will automatically run all files in this folder
• Inside the newly created folder create the file functions.test.js

Step 4

Summary

Now we will write our first unit tests! Let's start with our utility functions.

Instructions

• In functions.test.js, import the add function
  • This function can be found in the ../utils/functions file
• Create a test that checks whether add correctly adds 2 integers together
• Create a test that checks whether add will add a string and number together
• Lastly, create a test to check if add returns NaN if non numbers are passed
  • Hint: check the jest documentation for a matcher that might be helpful with NaN
• Once complete, run npm run test to check if your unit tests work

functions.test.js

import { add } from '../utils/functions';

test('add returns the sum of two numbers', () => {
  expect(add(1, 2)).toBe(3);
});

test('add handles string inputs that are numbers', () => {
  expect(add('3', '4')).toBe(7);
});

test(`add returns NaN if non numbers are passed`, () => {
  expect(add('hello', 'world')).toBeNaN();
});

Step 5

Summary

Next, we will be testing our React components. There are many ways to test React components, but this will focus exclusively on testing with the Jest framework only.

Instructions

• create a file called Counter.test.js in the src/__tests__ folder.
• Open Counter.test.js in the __tests__ folder
• Import React, render, fireEvent and Counter
  • React comes from the react package
  • render and fireEvent come from the @testing-library/react package
  • Counter is in the components folder
• Create a test for Counter that checks the starting text of the p tag
  • This counter will initialize at 0. Check the component for the jsx markup
• Create a second test for Counter that checks whether clicking the button actually increments the count
  • There will be two assertions in here. One that checks the text content before clicking and the second for after
  • Use the fireEvent method to simulate a button click
  • get the button using the returned method from render; getByTestId to retrieve the button and store to a variable

Counter.test.js

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from '../components/Counter';

it('Renders out starting text', () => {
  const { container } = render(<Counter />);
  expect(container.textContent).toContain(`You've clicked 0 times!`);
});

it('Clicking increments state count', () => {
  const { getByTestId, container } = render(<Counter />);
  const button = getByTestId('counter-button');
  expect(container.textContent).toContain(`You've clicked 0 times!`);
  fireEvent.click(button);
  expect(container.textContent).toContain(`You've clicked 1 times!`);
});

Step 6

Lastly, we will run our unit tests to make sure our functions and React components are doing what we expect them too.

Instructions

• run npm run test
  • You should see 5 tests passing

Contributions

If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.

Copyright

© DevMountain LLC, 2017. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.