Vue.js 使用delayResponse时,flushPromises()函数不会等待模拟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”响应 我错过了什么?有

我有一个登录组件,它应该获取用户凭据,将它们提交到API,并根据响应在VueX存储中设置JWT或显示错误

在单元测试中,我使用延迟的响应模拟axios调用,以模拟实际网络(使用axios模拟适配器库)。目前,测试失败了,因为尽管我使用的是
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