Vue.js 使用delayResponse时,flushPromises()函数不会等待模拟axios调用被解析
我有一个登录组件,它应该获取用户凭据,将它们提交到API,并根据响应在VueX存储中设置JWT或显示错误 在单元测试中,我使用延迟的响应模拟axios调用,以模拟实际网络(使用axios模拟适配器库)。目前,测试失败了,因为尽管我使用的是Vue.js 使用delayResponse时,flushPromises()函数不会等待模拟axios调用被解析,vue.js,jestjs,vue-test-utils,axios-mock-adapter,flush-promises,Vue.js,Jestjs,Vue Test Utils,Axios Mock Adapter,Flush Promises,我有一个登录组件,它应该获取用户凭据,将它们提交到API,并根据响应在VueX存储中设置JWT或显示错误 在单元测试中,我使用延迟的响应模拟axios调用,以模拟实际网络(使用axios模拟适配器库)。目前,测试失败了,因为尽管我使用的是flushPromises()实用程序,但测试在承诺得到解决之前就完成了。 事实上,我在登录函数中没有看到任何一个控制台.log 如果我从模拟调用中删除delayResponse属性,测试通过,我会在控制台日志中看到预期的“gotdata”响应 我错过了什么?有
flushPromises()
实用程序,但测试在承诺得到解决之前就完成了。
事实上,我在登录函数中没有看到任何一个控制台.log
如果我从模拟调用中删除delayResponse
属性,测试通过,我会在控制台日志中看到预期的“gotdata”响应
我错过了什么?有人知道为什么flushPromises()
跳过axios调用吗
我使用的是Vuetify框架,因此使用了v-
标记,尽管我怀疑这会对测试产生影响
模板:
<v-alert
type="error"
:value="!!error"
test-id="LoginError"
v-html="error"
/>
<form
@submit.prevent="login"
test-id="LoginForm"
>
<v-text-field
label="Email Address"
test-id="LoginEmailField"
v-model="credentials.email"
/>
<v-text-field
label="Password"
type="password"
test-id="LoginPasswordField"
v-model="credentials.password"
/>
<v-btn
type="submit"
test-id="LoginSubmitBtn"
>
Login
</v-btn>
</form>
测试文件:
fit('Receives and stores JWT in the VueX store after sending valid credentials', async () => {
const maxios = new AxiosMockAdapter(axios, {delayResponse: 100});
const validData = { email: 'aa@bb.cc', password: '111' };
const validToken = 'valid-token';
maxios.onPost().reply(200, { payload: validToken });
wrapper.find('[test-id="LoginEmailField"]').vm.$emit('input', validData.email);
wrapper.find('[test-id="LoginPasswordField"]').vm.$emit('input', validData.password);
wrapper.find('[test-id="LoginSubmitBtn"]').trigger('click');
await flushPromises();
expect(localStore.state.user.token).toBe(validToken);
});
VueX商店:
export const state = {
user: {
token: null,
},
};
const mutations = {
SET_USER: (currentState, user) => {
currentState.user = user;
},
};
const actions = {
setUser: ({ commit }, payload) => {
commit('SET_USER', payload);
},
};
export const mainStore = {
state,
mutations,
actions,
};
export default new Vuex.Store(mainStore);
答复如下:
expect(received).toBe(expected) // Object.is equality
Expected: "valid-token"
Received: null
expect(received).toBe(expected) // Object.is equality
Expected: "valid-token"
Received: null