Testing, Unit test, Unit testingMarch 23, 2020July 8, 2020

Part 4 Testing React Applications – Unit test example

Hi, so the first thing that we need to start is creating one test suite and one test case.

So, we are going to use Behavior Driven Development (BDD is a branch of Test Driven Development (TDD). BDD uses human-readable descriptions of software user requirements as the basis for software tests.) syntax where in this case we will use describe (is essentially a test suit) and it (is an individual test case.)

So first step is create our test suit (that will save all our test cases) using describe

// Test Suite
describe("<Todo /> component Unit Tests", () => {
  //...
});

Then inside our the arrow function we will create our unit test with it

// Test Suite
describe("<Todo /> component Unit Tests", () => {

  // Individual Test Case
  it("should render 1 <Todo /> component", () => {})
});

Then if we go back to our todo component we will see that this component have a bunch of props like: onClick, completed, text.

We need to try to simulate the onClick event in our test.

And one nice thing is that after we installed Enzyme and use .test in our test files name (todo.test.js) Jest will be already configure to be used in your react scripts because this we have access to describe, it, and all assert methods.

We can see Enzyme as a place where we can mount our components that need to be tested and Jest will give us all the methods that we need for test our component.

So, to simulate the onClick function in our test, we need to use jest.fn()

// Test Suite
describe("<Todo /> component Unit Tests", () => {
  // Simulating our onClick event 
  const mockFn = jest.fn();

  // Individual Test Case
  it("should render 1 <Todo /> component", () => {})
});

Also we need to declare the props that are in todo component like this:

// Test Suite
describe("<Todo /> component Unit Tests", () => {
  // Simulating our onClick event
  const mockFn = jest.fn();
  const props = {
    onClick: mockFn,
    completed: false,
    test: "do laundry"
  }

  // Individual Test Case
  it("should render 1 <Todo /> component", () => {})
});

And now we already have our properties that we need to render our react component.

In the body of the it block we can go ahead and render our component, and here at this point we are going to use shallow from Enzyme and pass all the props (that declared) to the component.

// Test Suite
describe("<Todo /> component Unit Tests", () => {
  // Simulating our onClick event
  const mockFn = jest.fn();
  const props = {
    onClick: mockFn,
    completed: false,
    test: "do laundry"
  }

  // Individual Test Case
  it("should render 1 <Todo /> component", () => {

    // Using shallow from enzyme and passing all the props 
    // to the component
    const component = shallow(<Todo {...props} />)
  });
});

After we have the shallow section, we will have our assertions; first thing that we can assert is that we should have just one component:

// Test Suite
describe("<Todo /> component Unit Tests", () => {
  // Simulating our onClick event
  const mockFn = jest.fn();
  const props = {
    onClick: mockFn,
    completed: false,
    test: "do laundry"
  }

  // Individual Test Case
  it("should render 1 <Todo /> component", () => {

    // Using shallow from enzyme and passing all 
    // the props to the component
    const component = shallow(<Todo {...props} />)

    // Assertions
    expect(component).toHaveLength(1); 
    // .toHaveLength is from Jest
  });
});

The next step is run this test, so is very easy to do this, go to the terminal and run the command npm test

So the terminal is going to show us this

This means that is going to look for any file that have .test in the file name.

The test finish and we have this error:

So if you see our todo component have the property text and in our test file we are calling this property as a test (mistake here), so this is the cool things about testing our components, because if we are making mistakes as we type code once we implement our components the test will help us to catch that mistakes.

So, change test by text and this will fix the test.

// Test Suite
describe("<Todo /> component Unit Tests", () => {
  // Simulating our onClick event
  const mockFn = jest.fn();
  const props = {
    onClick: mockFn,
    completed: false,
    text: "do laundry"
  }

  // Individual Test Case
  it("should render 1 <Todo /> component", () => {

    // Using shallow from enzyme and 
    // passing all the props to the component
    const component = shallow(<Todo {...props} />)

    // Assertions
    expect(component).toHaveLength(1); 
    // .toHaveLength is from Jest
  });
});

Cool, so in our terminal when we run npm test command this is running in watch mode and means that is monitoring our project directory so when there are changes in the files and we save it, this will be run the test again.

Now we don’t have any errors in the terminal: