Cacher is the code snippet organizer for pro developers

Jest cheat sheet

https://github.com/sapegin/jest-cheat-sheet

Access component method

wrapper.instance().componentMethod

Access inner component

import InnerComponent from './InnerComponent';

wrapper.find(InnerComponent).instance()

Test saga when error occurred

const next = gen.throw(err);
expect(next.value).toEqual(put(failedAction()));

Expect callback to be any function(e.g. setTimeout)

expect(next.value).toEqual(put(action({
  callback: expect.any(Function),
})));

Ref: https://stackoverflow.com/a/48204295

Mock import method

import method from 'utils/method';

jest.mock('utils/methods');
method.mockReturnValueOnce(true);

expect(method()).toEqual(true);

Ref: https://stackoverflow.com/a/47299120

Mock import component

How to test the following component?

import { ComponentA } from 'npm-installed-component';
import ComponentB from 'where/to/component';

export class TestComponent extends Component {
   render() {
      return (
         <div>
            <ComponentA />
            <ComponentB />
         </div>
      )
   }
}

Mock components like this:

jest.mock('where/to/component', () => () => (
  <div id="MockComponentB">
    MockComponentB
  </div>
));
jest.mock('npm-installed-component', () => ({
  ComponentA: 'MockComponentA'
}))

Now you could write the test.

describe('TestComponent', () => {
  it('should render initial component', () => {
    const wrapper = mount(<TestComponent />);
    expect(wrapper.find('MockComponentA').length).toEqual(1)
    expect(wrapper.find('#MockComponentB').length).toEqual(1)
  });
});

Ref: https://hackernoon.com/how-do-you-mock-a-react-component-with-jest-unit-test-javascript-tutorial-example-spy-jest-enzyme-6c681f812a00

dataLayer

window.dataLayer.push = jest.fn();

location.assign

window.location.assign = jest.fn();

expect(window.location.assign).toHaveBeenCalledTimes(0);
window.location.assign(url);
expect(window.location.assign).toHaveBeenCalledWith(url);

timeout

const callback = jest.fn();

function timeout () {
  setTimeout(() => callback(), 1000);
}

it('should call the callback after the timeout', () => {
  jest.useFakeTimers();
  timeout();
  expect(callback).not.toBeCalled();
  jest.runAllTimers();
  expect(callback).toBeCalled();
});

Access mock call arguments

const callback = jest.fn();

callback.mock.calls[0]    // arguments in first called
callback.mock.calls[1][0] // first argument in second called

Clear mock call arguments

Make sure to mockClear everytime you use toHaveBeenCalledWith with the same mock function, or it will always check the first argument you've called before.

const callback = jest.fn();

beforeEach(() => {
  callback.mockClear(); // if you didn't add this line, the second test will get error.
});

it('should be called with `a`', () => {
  callback('a');
  expect(callback).toHaveBeenCalledWith('a');
});

it('should be called with `b`', () => {
  callback('b');
  expect(callback).toHaveBeenCalledWith('b');
});