Axios
Vueアプリケーションやほとんどの新しいコードでは、サーバーとの通信にAxiosを使用しています。
すべてのデフォルトが設定されていることを保証するために、Axiosを直接使用せず、axios_utils
からAxiosをインポートしてください。
CSRFトークン
すべてのリクエストには CSRF トークンが必要です。 このトークンが設定されていることを保証するために、Axios をインポートしてトークンを設定し、axios
をエクスポートします。
トークンが設定されていることを確認するために、Axiosを直接使用する代わりに、このエクスポートモジュールを使用する必要があります。
使用方法
import axios from './lib/utils/axios_utils';
axios.get(url)
.then((response) => {
// `data` is the response that was provided by the server
const data = response.data;
// `headers` the headers that the server responded with
// All header names are lower cased
const paginationData = response.headers;
})
.catch(() => {
//handle the error
});
アクシオスの模擬テスト回答
レスポンスをモックするために、axios-mock-adapterを使用しています。
spyOn()
を上回る利点:
- レスポンスオブジェクトを作成する必要なし
- はコールスルーを許可しません。
- エラーケースをテストするためのシンプルなAPI
-
replyOnce()
を提供し、さまざまな対応を可能にします。
また、Axiosインターセプターはモッキングに適していないため、使用しないことにしました。
例
import axios from '~/lib/utils/axios_utils';
import MockAdapter from 'axios-mock-adapter';
let mock;
beforeEach(() => {
// This sets the mock adapter on the default instance
mock = new MockAdapter(axios);
// Mock any GET request to /users
// arguments for reply are (status, data, headers)
mock.onGet('/users').reply(200, {
users: [
{ id: 1, name: 'John Smith' }
]
});
});
afterEach(() => {
mock.restore();
});
Axiosを使ったテストでの模擬投票リクエスト
ポーリング関数はヘッダー・オブジェクトを必要とするので、第3引数には常にオブジェクトを含める必要があります:
mock.onGet('/users').reply(200, { foo: 'bar' }, {});