react test utils

ReactTestUtils.test.js

import React from 'react';
import ReactTestUtils, { act } from 'react-dom/test-utils';
import ReactDOM from 'react-dom';
import TestRenderer from 'react-test-renderer';
import { Pill } from 'seek-style-guide/react';
import SkillsForm from './SkillsForm';

const defaultProps = {
  initialSkills: [],
  onChange: () => {},
  onSubmit: () => {},
  onCancel: () => {},
}

describe('SkillsForm:', () => {
  let container;

  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });
  
  afterEach(() => {
    document.body.removeChild(container);
    container = null;
  });
  
  it('should render with no initialSkills', () => {
    const testRenderer = TestRenderer.create(<SkillsForm {...defaultProps} />)
    const testInstance = testRenderer.root;
    const Pills = testInstance.findAllByType(Pill);

    expect(Pills).toHaveLength(0);
  });

  it('should render with some initialSkills', () => {
    const testRenderer = TestRenderer
      .create(<SkillsForm {...defaultProps} initialSkills={['HTML', 'CSS']} />)
    const testInstance = testRenderer.root;
    const Pills = testInstance.findAllByType(Pill);

    expect(Pills[0].props.text).toEqual('HTML');
    expect(Pills[1].props.text).toEqual('CSS');
  });

  it('should be able to add new skills', () => {
    act(() => {
      ReactDOM.render(<SkillsForm {...defaultProps} />, container);
    });

    const input = container.querySelector('input');
    input.value = 'Javascript';
    ReactTestUtils.Simulate.change(input);
    ReactTestUtils.Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});
    const html = container.innerHTML;

    expect(/Javascript/.test(html)).toBe(true);
  })


  describe('event handlers:', () => {
    it('when the SubmitButton is clicked, onSubmit should get called', () => {
      const SubmitButton = (props) => <button className="test" {...props}>Submit</button>
      const onSubmitHandler = jest.fn();
      act(() => {
        ReactDOM.render(<SkillsForm {...defaultProps} submitButton={SubmitButton} onSubmit={onSubmitHandler} />, container);
      });
  
      const button = container.querySelector('.test');
  
      act(() => {
        button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
      });
  
      expect(onSubmitHandler).toHaveBeenCalledTimes(1);
    })

    it('when the CancelButton is clicked, onCancel should get called', () => {
      const CancelButton = (props) => <button className="test" {...props}>Cancel</button>
      const onCancelHandler = jest.fn();
      act(() => {
        ReactDOM.render(<SkillsForm {...defaultProps} cancelButton={CancelButton} onCancel={onCancelHandler} />, container);
      });
  
      const button = container.querySelector('.test');
  
      act(() => {
        button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
      });
  
      expect(onCancelHandler).toHaveBeenCalledTimes(1);
    })

    it('when the onChange is triggered, onChange should get called', () => {
      const onChangeHandler = jest.fn();
      act(() => {
        ReactDOM.render(<SkillsForm {...defaultProps} onChange={onChangeHandler} />, container);
      });
      const input = container.querySelector('input');

      input.value = 'Javascript';
      ReactTestUtils.Simulate.change(input);
      ReactTestUtils.Simulate.keyDown(input, {key: "Enter", keyCode: 13, which: 13});
  
      // act(() => {
      //   button.dispatchEvent(new InputEvent('change', {bubbles: true}));
      // });
  
      expect(onChangeHandler).toHaveBeenCalledTimes(1);
    })
  })
});



// Save this file to a gist for reference