How to spy componentWillMount using jest and enzyme

Question

I am trying to test whether componentWillMount was called and for that my test is

test('calls `componentWillMount` before rendering', () => {
  let fn = jest.fn(SomeComponent.prototype.componentWillMount)
  mount(<SomeComponent />)
  expect(fn).toHaveBeenCalled()
})

But even though the componentWillMount method is called, the test does not pass. What am I missing here?

Answer 1

I don't know if the other answers have helped with your question, but you shouldn't need to test componentWillMount. React should already do that testing for you.

More relevant to your testing would be to test the functions or actions you are putting in that method for your component.

If you are making some API call, running a function based on props, or anything else, that is what you should be testing for. Mock the function/action/code that componentWillMount triggers, and make assertions and expectations on that.

Example:

Component:

class YourComponent extends Component {

  componentWillMount() {
    /*this fetch function is actually what you want to test*/
    this.props.fetch('data')
  }

  render() {
    /* whatever your component renders*/ 
  }    
}

Tests:

test('should call fetch when mounted', () => {
  let mockFetch = jest.fn()

  const wrapper = mount(<SomeComponent fetch={mockFetch}/>);

  expect(wrapper).toBeDefined();
  expect(mockFetch).toHaveBeenCalled();
  expect(mockFetch.mock.calls[0]).toEqual(['data'])
});

Answer 2

Try this:

test('calls `componentWillMount` before rendering', () => {
  const onWillMount = jest.fn();
  SomeComponent.prototype.componentWillMount = onWillMount;
  mount(<SomeComponent />);

  expect(onWillMount).toBeCalled();
});

Answer 3

I would first spy on the component's componentWillMount method but also use .and.CallThrough() to prevent it from mocking its contents. Hope this helps:

it('should check that the componentWillMount method is getting called', () => {
    spyOn(SomeComponent.prototype, 'componentWillMount').and.callThrough();

    const wrapper = mount(<SomeComponent />);

    expect(wrapper).toBeDefined();
    expect(SomeComponent.prototype.componentWillMount).toHaveBeenCalledTimes(1);
});

Answer 4

I don't believe the above answer addresses the issue. Which is jest allow you to spyOn a method but does not allow you to callThrough while spying on its call status. The solution that worked best for me is to setup the test with a component that has componentWillMount defined. Leaning on jest will just make things more complicated.

describe('componentWillMount', () => {
  const calls = []
  class Component1 extends Components {
    componentWillMount() {
      calls.push(new Date)
    }
    render() { ... }
  }
  
  afterEach(() => calls.splice(0, calls.length))
  it('has been called', () => {
    mount(<Component1 />)
    expect(calls.length).toBe(1)
  })
})