UNIT TESTING WITH

JavaScript

Jest AND Enzyme

Front-End Developer

at Hotmart

 

GDG ORGANIZER

Lauro Mansur

lauromansur

WHAT IS IT?

WHY UNIT TESTING?

Talk: UNIT TESTING

HOW TO DO IT?

Jest

Enzyme

Hands on

WHAT ELSE?

WHAT IS...

UNIT TESTING?

unit tests are low-level, focusing on a small part of the software system

Martin Fowler

Practical Test Pyramid

WHY UNIT TESTING?

Source: embeddedinsights.com

AND IF TIME AND MONEY ARE NOT SUFFICIENT ARGUMENTS ...

Improves code quality

Makes debugging easier

Provides greater security when refactoring

Provides documentation

Improves application architecture

Makes integrations easier

HOW TO DO IT?

INPUTS

OUTPUTS

UNIT

ANALYZE

TEST MAINLY THE NON-STATIC THINGS OF YOUR CODE

User Interaction:

  • Props

  • State

  • Events / Functions

User Interface:

  • Component Tree Integrity
     

  • Snapshots

Decide inputs and outputs

Choose the function signature

Decide on a small aspect of functionality

Implement the test

Implement the code

Universal

Testing

Platform

LITTLE config

  snapshots 

isolated

great api

code coverage

easy mocking

well-documented

wide community

assertion library

good command line

Enzyme

  • JavaScript Testing utility for React

  • Makes it easier to assert, manipulate, and traverse your components' output

JavaScript

Testing

Utility

3rd Party Adapters

Shallow Rendering

Full DOM Rendering

Static Rendered Markup

Selectors

Hands on

USE CASE

<EmailForm />

<FormControl />

ENZYME RENDERING

<EmailForm />

<FormControl />

SHALLOW

RENDERING

FULL

RENDERING

(MOUNT)

SNAPSHOT TESTING

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EmailForm renders component tree correctly (without enzyme) 1`] = `
<form
  className="email__form"
>
  <div
    className="form__control"
  >
    <label
      htmlFor="from"
    >
      From:
    </label>
    <input
      autoComplete="off"
      id="from"
      name="from"
      onChange={[Function]}
      value=""
    />
  </div>
  <div
    className="form__control"
  >
    <label
      htmlFor="to"
    >
      To:
    </label>
    <input
      autoComplete="off"
      id="to"
      name="to"
      onChange={[Function]}
      value=""
    />
  </div>
  <div
    className="form__control"
  >
    <label
      htmlFor="subject"
    >
      Subject:
    </label>
    <input
      autoComplete="off"
      id="subject"
      name="subject"
      onChange={[Function]}
      value=""
    />
  </div>
  <div
    className="form__control"
  >
    <label
      htmlFor="message"
    >
      Message:
    </label>
    <textarea
      autoComplete="off"
      id="message"
      name="message"
      onChange={[Function]}
      value=""
    />
  </div>
  <div
    className="form__actions"
  >
    <button
      className="button__icon"
      onClick={[Function]}
      type="submit"
    >
      Send
      <svg>
        paper-plane-solid.svg
      </svg>
    </button>
  </div>
</form>
`;

SNAPSHOT TESTING

JEST MOCKING

test('sendEmail handler should be called on click event', () => {
      const tree = shallow(<EmailForm />);

      const spy = jest.spyOn(tree.instance(), 'sendEmail');
      tree.instance().forceUpdate();
      
      tree.find('button[type="submit"]').simulate('click', {
        preventDefault: jest.fn()
      });

      expect(spy).toHaveBeenCalledTimes(1);
});

ENZYME SELECTORS

COMMAND LINE OPTIONS

More options at https://jestjs.io/docs/en/cli

what else?

CODE COVERAGE

USEFUL FOR CI/CD QUALITY PIPELINES

THANK YOU!

lauromansur

JavaScript Unit Testing with Jest and Enzyme

By Lauro Mansur

Made with Slides.com

JavaScript Unit Testing with Jest and Enzyme

In this talk we will explore a little about the importance of unit testing in the development process and give an introduction on modern tools to write and maintain tests in a practical and efficient way.

  • 134