Невозможно вызвать .hen, когда насмешливый аксиос вызывает внутри componentDidMount

Question

Я пытаюсь выполнить юнит-тест componentDidMount во время издевательства над вызовом Axios.

// src/App.tsx
import axios_with_baseUrl from './axios-instance-with-baseUrl';
...

public componentDidMount() {
    axios_with_baseUrl.get('/data.json')
       .then(resp => this.setState({ stuff }));
}

// src/App.test.tsx
jest.mock('./axios-instance-with-baseUrl', () => {
    return {
       get: jest.fn(() => Promise.resolve(someFakeData))
    };
});

import axios_with_baseUrl from './axios-instance-with-baseUrl';

test('fetches data on componentDidMount', async () => {
    const app = enzyme.shallow(<App />);
    app.instance().componentDidMount()
       .then(() => {
           expect(axios_with_baseUrl.get).toHaveBeenCalled();
       });
});

Когда я тестирую приведенный выше код, я получаю следующее сообщение об ошибке:

TypeError: Cannot read property 'then' of undefined

  26 | test('componentDidMount', async () => {
  27 |   const app = enzyme.shallow(<App />);
> 28 |   app.instance().componentDidMount()
     |   ^
  29 |     .then(() => {

Я думаю, это имеет смысл, поскольку componentDidMount является пустым методом, но яНе знаю, почему учебники, такие как this , делают это таким образом.Лучше всего просто игнорировать этот шаблон?

Это еще один паттерн, который я нашел:

await app.instance().componentDidMount();
expect(axios_with_baseUrl.get).toHaveBeenCalled();

Более важный вопрос: является ли какой-либо из вышеперечисленных хороших паттернов для насмешливых Axios в юнит-тестах?Или я должен просто положиться на что-то вроде axios-mock-adapter?

Answer 1

Просто добавьте return перед axios_with_base_url, чтобы сделать promise

public componentDidMount() {
    return axios_with_baseUrl.get('/data.json')
       .then(resp => this.setState({ stuff }));
}