クラスに次のメソッドがあります:
_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の他の優れたテストライブラリを知っている場合は、自由に共有してください。
ファイルの先頭:
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: {} });
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)
})
typeScriptのaxios.getにそのメソッドが存在しないため、mockResolvedValueを呼び出すことができません。
アサーションを使用できます。
(axios.get as any).mockResolvedValue(resp)
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([])
})