[解決済み] axios-mock-adapter onGet mock data not effective.
質問
axios-mock-adapterでaxiosの呼び出しをテストしようとしています。以下の問題が発生しました。 テスト用のAPIコールは、mock.onGetでモックしたものではなく、常に実際のデータで応答します。 つまり、receivedActionsは常に本物のAPIコールから返されますが、mock.onGetでモック化したexpectedActionsは返されません。 以下は、そのアクションのコード(searchAction.js)です。
import { SEARCH_PHOTOS, FEATURED_PHOTOS } from './types';
import axiosInstence from '../apis/axiosInstence';
export const searchPhotos = (term) => (dispatch) => {
dispatch({ type: 'SEACH_REQUEST' });
return axiosInstence.get('/search/photos', {
params: {
query: term,
page: 1
}
}).then(response => {
dispatch({
type: 'SEARCH_PHOTOS',
payload: response.data
});
}).catch(error => {
dispatch({ type: 'SEACH_FAILURE' });
});
}
そして、私のテストは次のようになります(searchAction.test.js)。
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
import { searchPhotos } from '../searchAction';
const mock = new MockAdapter(axios);
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const term = 'cars';
const store = mockStore({});
describe('actions', () => {
beforeEach(() => {
mock.reset();
store.clearActions();
});
it('Should create an action to signIn with a fake user', async () => {
const expectedActions = [{
type: 'SEACH_REQUEST'
}, {
type: 'SEARCH_PHOTOS',
payload: []
}];
mock.onGet('/search/photos', {
params: { term: 'cars' }
}).reply(200, expectedActions);
await store.dispatch(searchPhotos(term))
.then(data => {
const receivedActions = store.getActions();
expect(receivedActions).toEqual(expectedActions);
});
});
});
どなたか同じような問題を経験された方、またはアドバイスをお願いします。 アドバイスありがとうございます。
解決方法を教えてください。
あなたのコードには、いくつかの問題があります。
まず
アクションの作成では、axios インスタンスを使用して ajax 呼び出しを行っていますが、テストでは、そのインスタンスを
axios-mock-adapter
. のインスタンスを作成するときに、アクシオスのインスタンスを提供する必要があります。
MockAdapter
.
第二
は、その
params
プロパティで、axios モックに提供しています。
onGet
メソッドで送信されるパラメータと一致しません。
get
の操作をアクションクリエイターで行うことができます。呼び出しのパラメータとその値を一致させる必要があります。したがって
query
と
page
パラメータを指定します。
最後の
を返すのであれば
expectedActions
をモック・リクエストで使用することはできますが、これは正しいとは言えません。あなたのコードを見ると、空の配列を返したいようです。
これらを考慮すると、あなたのコードは次のようになります。
import MockAdapter from 'axios-mock-adapter';
import thunk from 'redux-thunk';
import configureMockStore from 'redux-mock-store';
import axiosInstence from '../../apis/axiosInstence';
import { searchPhotos } from '../searchAction';
const mock = new MockAdapter(axiosInstence);
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const term = 'cars';
const store = mockStore({});
describe('actions', () => {
beforeEach(() => {
mock.reset();
store.clearActions();
});
it('Should create an action to signIn with a fake user', async () => {
const expectedActions = [{
type: 'SEACH_REQUEST'
}, {
type: 'SEARCH_PHOTOS',
payload: []
}];
mock.onGet('/search/photos', {
params: {
query: 'cars',
page: 1
}
}).reply(200, []);
const data = await store.dispatch(searchPhotos(term));
const receivedActions = store.getActions();
expect(receivedActions).toEqual(expectedActions);
});
});
関連
-
[解決済み】コンポーネントの定義に表示名がない react/display-name
-
[解決済み] バベルエラーです。JSX値は、式または引用されたJSXテキストのいずれかである必要があります。
-
[解決済み] SVGサークル内の画像にボーダーを追加する方法
-
[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには?
-
[解決済み] React-Router 4 キャッチオールルート
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] React - _this2.SetStateは関数ではありません。
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法
-
[解決済み] axiosのpostリクエストでフォームデータを送信する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React - 式は1つの親要素を持つ必要がありますか?
-
[解決済み] テスト
-
[解決済み] ReactJsのCreateClassは関数ではない
-
[解決済み] TypeError: reactjs の未定義のプロパティ 'status' を読み取ることができません。
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] 非必須項目に対するYupバリデーション
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] axios-mock-adapter onGet mock data not effective.
-
[解決済み] validateDOMNesting警告React
-
[解決済み] nextjsで異なる.envファイルを使用するには?