如何监视在componentDidMount内部调用的方法

Question

I am trying to spy on a method which is called inside componentDidMount. The method itself resides inside another file. Here is what i tried so far:

import apicall from './AnotherFile'
class MyComponent {
    componentDidMount() {
        apicall()
    }
    <other code ->
}

Test:

const wrapper = mount(<MyComponent/>);
const instance = wrapper.instance();
jest.spyOn(instance, 'apicall');
instance.componentDidMount();
expect(instance.apicall).toHaveBeenCalled();

It gives an error:

Cannot spy the apicall property because it is not a function; undefined given instead

Any idea how this can be achieved ?

Answer 1

There are a few ways you can do this:

1. Mock the import in your test file : By using jest.mock , Jest will intercept an import and create a mock version when it's used in the component file:

    // MyComponent.test.js import apicall from './AnotherFile' jest.mock('./AnotherFile'); it('makes API call', () => { const wrapper = mount(<MyComponent />); expect(apicall).toHaveBeenCalled(); }); 

No need to get the instance , no need to manually call componentDidMount , that will happen when you mount(<MyComponent />) . Note: if apicall should return a value or a promise, you can provide a mock value:

// Mock a response if your componentDidMount calls `apicall.then()`...
apicall.mockImplementation(() => Promise.resolve('some value'));
// Mock a rejected Promise to test error cases
apicall.mockImplementation(() => Promise.reject('Oh no!'));

2. Dependency injection: Pass the apicall function into your component. You can make it default to the actual apicall you import, but in the test you can pass in a mock function:

    // MyComponent.js import apicall as realApiCall from './AnotherFile' class MyComponent extends Component { static defaultProps = { apicall: realApiCall } componentDidMount() { // This will call the real apicall if you don't provide // a prop: <MyComponent /> ... but allows you to inject // a mock apicall function in tests. this.props.apicall() } <other code -> } // MyComponent.test.js const apicall = jest.fn(); const wrapper = mount(<MyComponent apicall={apicall} />); expect(apicall).toHaveBeenCalled(); 

Answer 2

You mock the function that was imported. Try this

    import * as dependency from '../AnotherFile';

    describe('MyComponent', () => {
        it('test apicall', () => {
            dependency.apicall = jest.fn();

            const wrapper = mount(<MyComponent />);
            wrapper.instance().componentDidMount();

            expect(dependency.apicall).toHaveBeenCalled();
        });
    });