web-dev-qa-db-ja.com

TypeError：axios.createが関数ではないのはなぜですか？ axiosGETをテストする場合

ReactでaxiosAPI関数をテストしようとしています。

ここでこの質問を見つけました： jestでaxiosをテストするにはどうすればよいですか これは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();
    });
  });
});

enter image description here

unit-testingtestingaxiosaxios-mock-adapter
6
Leon Gaban

すでにaxiosを嘲笑していますか？私は自分でこの問題に遭遇しました。間違った場所をすべて調べた後、すでにaxiosをjestでモックしていることに気付きました。

次のスニペットを 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を使用している場合は、他のモックを削除することをお勧めします（上記のスニペットはスキップしてください）。

6
JohnnyCoder

これはグーグルでの最初のヒットであり、選択された回答は実際には質問に回答しないため、ここに追加します。

この問題は通常、すでに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__フォルダーで手動モックを作成することの両方が同じように役立つことがわかりました。

3
Cent