Как шпионить за методом, который вызывается внутри componentDidMount

Question

Я пытаюсь шпионить за методом, который вызывается внутри componentDidMount. Сам метод находится в другом файле. Вот что я попробовал до сих пор:

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

Тест:

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

выдает ошибку:

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

Есть идеи, как этого достичь?

Answer 1

Есть несколько способов сделать это:

1. Подделать импорт в ваш тестовый файл : с помощью jest.mock Jest будет перехватывать импорти создайте фиктивную версию, когда она используется в файле компонента:

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

Нет необходимости получать instance, нет необходимости вручную вызывать componentDidMount, что произойдет, когдаВы mount(<MyComponent />).Примечание: если apicall должно вернуть значение или обещание, вы можете указать фиктивное значение:

// 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!'));

Внедрение зависимостей: Передайте функцию apicall в ваш компонент.Вы можете установить по умолчанию значение фактического apicall, которое вы импортируете, но в тесте вы можете передать фиктивную функцию:

// 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

Вы издеваетесь над функцией, которая была импортирована. Попробуйте это

    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();
        });
    });