我想测试是否在生命周期方法 componentDidMount 中调用了某个方法，但出现错误

Question

I have a lifecycle method, componentDidMount that is calling a function, setDateOnMount which will be a spy within it. I am using jest and enzyme to test whether setDateOnMount runs or not, and I am getting an error that it is not called.

I have seen posts with the wrapper being called with mount rather than shallow , but I can't use mount because I am using the react-dates package, and it is conflicting with mount, where I cannot run it.

Here is my test:

test('componentDidMount should be called with setDateOnMount', () => {
        const setDateOnMount = jest.fn()
        const location = {
            state: undefined
        }
        const componentDidMount = jest.spyOn(MealSummary.prototype, 'componentDidMount')
        const wrapper = shallow(<MealSummary meals={meals} location={location} setDateOnMount={setDateOnMount} />)

        expect(componentDidMount).toHaveBeenCalledTimes(1)
        expect(setDateOnMount).toHaveBeenCalledTimes(1)  //errors here that it is not called
    })

The partial component I am testing is here:

.
.
 componentDidMount() {
        this.setDateOnMount()
    }
.
.
...

How can I get it to work?

Answer 1

To test if setDateOnMount is called or not, you can mock or spy on it:

• Spy :

test('componentDidMount should be called with setDateOnMount', () => {
  const setDateOnMount = jest.spyOn(MealSummary.prototype, 'setDateOnMount') // spy
  const wrapper = shallow(<MealSummary meals={[]} location={{state: undefined}}  />) // create
  expect(setDateOnMount).toHaveBeenCalledTimes(1) // test
})

• Mock :

test('componentDidMount should be called with setDateOnMount', () => {
  const setDateOnMount = MealSummary.prototype.setDateOnMount = jest.fn() // mock
  const wrapper = shallow(<MealSummary meals={[]} location={{state: undefined}}  />) // create
  expect(setDateOnMount).toHaveBeenCalledTimes(1) // test
})