React Unit Tests with Jest, Enzyme and Sinon

Install Enzyme

• a testing utility for React yarn add --dev enzyme enzyme-adapter-react-16

Install Enzyme to JSON

• converts Enzyme wrappers for Jest snapshot matcher yarn add --dev enzyme-to-json

Install Sinon

• Standalone test spies, stubs and mocks for JavaScript. yarn add --dev sinon

Setup file src\setupTests.js

// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Link.test.js

Test by counting number of elements

it('renders a link', () => {
  const output = shallow(<Link />)
  expect(output.find('a').length).toEqual(1)
})

it('renders an output area', () => {
  const output = shallow(<Link />)
  expect(output.find('div.output-area').length).toEqual(1)
})

it('renders a heading inside the output area', () => {
  const output = shallow(<Link />)
  expect(output.find('div.output-area').find('h2').length).toEqual(1)
})

it('renders the link inside the output area', () => {
  const output = shallow(<Link />)
  expect(output.find('div.output-area').find('a').length).toEqual(1)
})

Test by expecting exact html

it('renders the Link output area', () => {
  const output = shallow(<Link title='Google' url='http://www.google.com'/>)
  const expected =
    '<div class="output-area">' +
    '<h2>A link to Google</h2>' +
    '<a href="http://www.google.com">'+
    'Google' +
    '</a>' +
    '</div>'
  const result = output.find('div.output-area').html()
  expect(result.indexOf(expected) > -1).toEqual(true)
})

Test by matching a snapshot

it('renders correctly', () => {
  const output = shallow(
    <Link title="mockTitle" url="mockUrl" />
  )
  expect(shallowToJson(output)).toMatchSnapshot()
})

Test window events

it('handles the click event and calls a window.alert', () => {
  window.alert = jest.fn()
  const output = shallow(
    <Link title="mockTitle" url="mockUrl" />
  )
  
  output.find('a').simulate('click')
  expect(window.alert).toHaveBeenCalledWith('Clicked!')
})

Test events when it's a custom function

it('calls a function when clicked', () => {
  const doSomethingCool = jest.fn() // Mock function doSomethingCool()
  const output = shallow(
    <Link title="mockTitle" url="mockUrl" onLinkClick={() => {
      doSomethingCool()
    }} />
  )
  output.find('div').simulate('click')
  expect(doSomethingCool).toHaveBeenCalledTimes(1)
})

Test simulated click events

it('simulates click events', () => {
  const onLinkClick = sinon.spy()
  const output = shallow(
    <Link title="mockTitle" url="mockUrl" onLinkClick={onLinkClick} />
  )
  output.simulate('click')
  expect(onLinkClick.calledOnce).toEqual(true)
})

App.test.js

Test by matching a snapshot

it('renders correctly', () => {
  const output = shallow(
    <App />
  )
  expect(shallowToJson(output)).toMatchSnapshot()
})

Test by rendering through mounting

it('always renders a div', () => {
  const output = mount(
    <App />
  )
  const divs = output.find('div')
  expect(divs.length).toBeGreaterThan(0)
})

Test by comparing the children

it('contains everything else that gets rendered', () => {
  const output = mount(
    <App />
  )
  const divs = output.find('div')
  // Outermost div is first on the list
  const outermostDiv = divs.first()
  // console.log(outermostDiv.children().getElements())
  // console.log(output.children().children().getElements())
  expect(outermostDiv.children()).toEqual(output.children().children())
})

Test when state changes with standard event

it('changes the state when button is clicked', () => {
  const output = shallow(<App />)
  // Before click
  expect(output.state().clicked).toEqual(false)
  // During click
  output.find('button').simulate('click') // Standard onClick
  // After click
  expect(output.state().clicked).toEqual(true)
})

Test when state changes with custom event 'onLinkClick'

it('changes the state when Link is clicked', () => {
  const output = shallow(<App />)
  // Before click
  expect(output.state().clicked).toEqual(false)
  // During click
  output.find('Link').simulate('linkClick') // Because event is called onLinkClick
  // After click
  expect(output.state().clicked).toEqual(true)
})

Disable jsdom in package.json if not needed

• If not using jsdom (e.g. document, window), tests will run faster when it's disabled

// "test": "react-scripts test --env=jsdom",
"test": "react-scripts test",