web-dev-qa-db-ja.com

Jest + TypeScript + Axiosテストを取得できません

クラスに次のメソッドがあります：

_import axios from 'axios'

public async getData() {
   const resp = await axios.get(Endpoints.DATA.URL)
   return resp.data
}
_

次に、これを行うJestテストを設定しようとしています。

_jest.mock('axios')

it('make api call to get data', () => {
   component.getData()
   expect(axios.get).toHaveBeenCalledWith(Endpoints.DATA.URL)
})
_

問題は、戻り値をモックしていないため、dataまたはnullオブジェクトに対してundefinedを呼び出しているため、_resp.data_に対してエラーが発生することです。 。これを機能させるためにさまざまな方法を試すために少なくとも2時間を費やしましたが、戻り値で_axios.get_をモックする方法を見つけることができません。

JestのドキュメントはJavaScriptを使用しているため、この例 axios.get.mockResolvedValue(resp) を使用できますが、mockResolvedValueを呼び出すことはできません。そのメソッドがTypeScriptの_axios.get_に存在しないためです。

また、TypeScriptでこれを簡単に実行できるJest以外のReactの他の優れたテストライブラリを知っている場合は、自由に共有してください。

reactjstypescriptaxiosjestjs
10
Stefan Zhelyazkov

ファイルの先頭：

import axios from 'axios';
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

これで通常のモックとして使用できます：

mockedAxios.get.mockRejectedValue('Network error: Something went wrong');
mockedAxios.get.mockResolvedValue({ data: {} });
24
Jan Tumanov

jest.mockを"no-any"とともに使用する場合は、次のようにしてください。

import axios, { AxiosStatic } from 'axios'

interface AxiosMock extends AxiosStatic {
  mockResolvedValue: Function
  mockRejectedValue: Function
}

jest.mock('axios')
const mockAxios = axios as AxiosMock

it('make api call to get data', () => {
   // call this first
   mockAxios.mockResolvedValue(yourValue)

   component.getData()
   expect(mockAxios.get).toHaveBeenCalledWith(Endpoints.DATA.URL)
})
4
Adam T. Smith

typeScriptのaxios.getにそのメソッドが存在しないため、mockResolvedValueを呼び出すことができません。

アサーションを使用できます。

(axios.get as any).mockResolvedValue(resp)
3
basarat

sinon ライブラリnpm install sinon @types/sinon --save-devを使用して、きちんとしたソリューションを見つけました。

次に、テストコードは次のようになります。

let component: Component
let axiosStub: SinonStub

beforeAll(() => {
    component = new Component({})
    axiosStub = sinon.stub(axios, 'get')
})

afterAll(() => {
    axiosStub.restore()
})

it('make api call to get data', async () => {
    // set up behavior
    axiosStub.withArgs(Endpoints.DATA.URL).returns({data: []})

    // method under test
    const res = await component.getData()

    // assertions
    expect(res).toEqual([])
})
2
Stefan Zhelyazkov