【问题标题】:Why TypeError: axios.create is not a function? When testing axios GET为什么 TypeError: axios.create 不是函数?测试 axios 时 GET
【发布时间】:2018-08-31 00:31:27
【问题描述】:

我正在尝试在 React 中测试我的 axios API 函数。

在这里发现了这个问题:how do i test axios in jest 指向使用axios-mock-adapter

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import chatbot from './chatbot';

describe('Chatbot', () => {
    it('returns data when sendMessage is called', done => {
        var mock = new MockAdapter(axios);
        const data = { response: true };
        mock.onGet('https://us-central1-hutoma-backend.cloudfunctions.net/chat').reply(200, data);

        chatbot.sendMessage(0, 'any').then(response => {
            expect(response).toEqual(data);
            done();
        });
    });
});

真正的作用:

/**
 * Retrieve all Akamai images
 * @param  {String} akamai Akamai url
 * @return {Thenable}      Resolved: Akamai images
 */
export const callGetAkamai = () =>
  makeRequest('/akamai', 'GET')
    .catch(defaultCatch('callGetAkamai'));

我的测试:

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { callGetAkamai } from './api';

describe('GetAkamai', () => {
  it('returns data when callGetAkamai is called', (done) => {
    console.log('MockAdapter', MockAdapter);
    const mock = new MockAdapter(axios);
    // const mock = axios.create({
    //   baseURL: 'https://us-central1-hutoma-backend.cloudfunctions.net/chat/'
    // });

    const data = { response: true };
    mock.onGet('https://us-central1-hutoma-backend.cloudfunctions.net/chat').reply(200, data);

    callGetAkamai().then((response) => {
      expect(response).toEqual(data);
      done();
    });
  });
});

【问题讨论】:

    标签: unit-testing testing axios axios-mock-adapter


    【解决方案1】:

    在此处添加此内容,因为它是 google 对问题的第一次点击,并且选择的答案并没有真正回答问题。

    这个问题通常发生在您已经在模拟 axios 时(很可能在 __mocks__ 文件夹中。

    使用 jest,您可以显式取消模拟,然后调用它axios-mock-adapter

    jest.unmock('axios');
    import axios from 'axios';
    import MockAdapter from 'axios-mock-adapter';
    ...
    

    axios-mock-adapter 在处理外部请求时提供了漂亮、灵活的 API。但是,它不会全局阻止您的应用进行可能由不同组件中的测试触发的外部调用。

    所以我发现使用axios-mock-adapter 和在__mocks__ 文件夹中进行手动模拟同样有用。

    【讨论】:

    • 我用 jest.unmock('axios');它解决了这个问题。所以现在我的测试正在运行,但测试失败了,所以 moch 不工作
    • @asma unmocking 后,你是否在同一个文件中进行了导入?您需要重新模拟您取消模拟的文件。想知道这是否完成了?
    • 是的,我做了导入和模拟,但它不起作用
    • @asma 对我来说也一样。你发现问题了吗
    • @Cent 你能分享一个工作代码sn-p吗?面临同样的问题。阿西奥斯。 create is not a functions 错误消失了,但 Mocking 不起作用。
    【解决方案2】:

    你已经在嘲笑axios 了吗?我自己也遇到过这个问题,在查看了所有错误的地方后,我意识到我已经在嘲笑 axiosjest

    将以下 sn-p 放入您的setupTestFrameworkScriptFile

    const mockNoop = () => new Promise(() => {});
    
    // Notice how `create` was not being mocked here...
    jest.mock('axios', () => ({
      default: mockNoop,
      get: mockNoop,
      post: mockNoop,
      put: mockNoop,
      delete: mockNoop,
      patch: mockNoop
    }));
    

    虽然您可以同时执行这两种操作,但如果您使用的是 axios-mock-adapter,您可能希望删除其他模拟(并跳过上面的 sn-p)。

    【讨论】:

    • 你是在测试文件本身还是像__mocks__/axios.ts这样:export default { create: () => new Promise(() => {} ) }
    • 好问题,我更新了上面的 sn-p,但你可以输入 setupTestFrameworkScriptFile。希望对您有所帮助。
    • 谢谢。我自己修好了。我在这里回答了stackoverflow.com/a/51414152/73323
    • 另外很高兴知道:即使整个 __mocks__/axios.ts 被注释掉,jest 仍然会嘲笑它!删除文件为我解决了问题。
    猜你喜欢
    • 2020-09-22
    • 2018-12-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-05
    • 1970-01-01
    • 2021-10-16
    • 2022-10-19
    相关资源
    最近更新 更多