enzyme-cheatsheet.md

Testing React with Jest and Enzyme - cheatsheet

Basic

const props = { disableTooltip: disableTooltipMock };
const wrapper = shallow(<PlannerTooltip {...props} />);

See props on a component

wrapper.props()

returns an object with all the props: {children: "Hello", className: "foo bar", includedProp="Success!"}

wrapper.prop('includedProp')

returns the value in that specific prop

Mocks

Using a mock to spy on as a property to a component

const disableTooltipMock = jest.fn();
const wrapper = shallow(<PlannerTooltip onClick={disableTooltipMock} />);

it('should call disableTooltip', () => {
  expect(disableTooltipMock).toHaveBeenCalled();
});
it('should call disableTooltip with parameter Wonder Woman', () => {
  expect(disableTooltipMock).toHaveBeenCalledWith('Wonder Woman');
});
it('should call disableTooltip 2 times', () => {
  expect(disableTooltipMock).toHaveBeenCalledTimes(2);
});

Get hold of internal variables on the component

Finds everything on this in the component.

const wrapper = shallow(<PlannerTooltip />);
const instance = wrapper.instance();
expect(instance.isOpen).toEqual(false);

Call internal methods on the component

const wrapper = shallow(<PlannerTooltip />);
const instance = wrapper.instance();
instance.openModal();
expect(instance.state.isOpen).toEqual(true);

Set new props

wrapper.setProps({ activePlannerPage: 'LAYOUT' });

Trigger events

const wrapper = shallow(); wrapper.simulate('click');

Testing react events

componentWillReceiveProps

Create the component, then set props wrapper.setProps({ activePlannerPage: 'LAYOUT' });

componentDidUpdate

You must do mount instead of shallow to test componentDidUpdate. This will also run other lifecycle, for example componentWillReceiveProps

const wrapper = mount(<PlannerTooltip />);
wrapper.setProps({ activePlannerPage: 'LAYOUT' });

Time

jest.useFakeTimers();
jest.runTimersToTime(5000);
jest.useRealTimers();

• simulate
• hur man hittar med find
• hur man vet om ett element finns eller inte

spyOn finns för att spionera utan att ersätta originalet jestjs/jest#3580
För det finns resetAllMocks()

window.matchMedia = jest.fn().mockReturnValue({ matches: 0 });

Om man fått ut en lista av element, med exempelvis find, så kan man använda first() för att hitta den första.
expect(images.first().prop('src').toEqual('somebase64');
Men om man vill hitta andra ska man använda get(index)
Då kan man inte göra prop('src') utan måste ist göra props.src av någon anledning
get ger en reactNode, till skilnad från at som ger en reactWrapper. Den senare kan man göra simulate på

expect(generate).toHaveBeenCalledWith(expect.any(Object), 550, expect.any(Object));

Vill du spionera på en mock?

importera modulen till testfilen, import { fullpageLoader } from 'fullpageLoader';
Mocka sen ut den, där strängen är vad modulen heter

jest.mock('fullpageLoader', () => ({
  fullpageLoader: {
    end: jest.fn(),
  },
}));

Sen kan du bara göra expect(fullpageLoader.end).toHaveBeenCalledTimes(1);

För att mocka ut komponenter som är exporterade default:

jest.mock('ui/HeaderStandard', () => () => (<div />));

Mocka ut resultatet av en global, typ Math.random:
jest.spyOn(Math, 'random').mockImplementation(() => 1);

testing preventDefault in a simulate click

    const preventDefaultMock = jest.fn();
    includedLink.simulate('click', { preventDefault: preventDefaultMock });
    it('should call the onClick callback', () => {
      expect(onClickMock).toHaveBeenCalledTimes(1);
    });

debug?
wrapper.find(Box).children().debug();

om man vill skriva ut själva markupen:
http://airbnb.io/enzyme/docs/api/ReactWrapper/html.html
(wrapper.html()

Det är något irriterande med att det inte går att mocka dependencies per test.
Om man gör mock på en dependency import, och sen gör "afterEach" reset all mocks, hur funkar det??

Spy on internal method:

        instance = wrapper.instance();
        instance.updateEntities = jest.fn();
        expect(instance.takeScreenshot).not.toHaveBeenCalled();