测试包含异步的 vuex 操作

Question

[这是一个 Vue 应用程序，使用 Vuex，使用 vue-cli 创建，使用 mocha、chai、karma、sinon]

我正在尝试为我的 vuex 状态创建测试，但我不想使用模拟——我进行这些测试的一大目标是也测试 API 数据即将到来来自.

我正在尝试遵循 chai-as-promised 的文档。

这是我正在尝试测试的 vuex 操作的简化版：

const actions = {
  login: (context, payload) => {
    context.commit('setFlashMessage', "");
    axios.get("https://first-api-call")
      .then((response) => {
        axios.post("https://second-api-call")
          .then((response) => {
            router.push({ name: "Home"});
            context.commit('setFlashMessage', "Logged in successfully");
            context.commit('setLogin', response.data);
        });
    },

请注意，登录操作有 两个承诺 而没有 return 任何东西。登录操作做了两件事：设置一些状态和更改路由。

我看到的使用 chai-as-promised 的示例期望承诺是 returned。即：

var result = systemUnderTest();
return expect(result).to.eventually.equal(blah);

但在我的例子中，login() 没有 return 任何东西，而且我不确定如果有的话我会 return 什么。

这是我目前拥有的：

import store from '@/src/store/store'
describe('login', () => {
  it('bad input', () => {
    store.login({ username: "abcd", password: ""});
    // What is the test I should use?
  }
}

Answer 1

我会 return 登录响应消息并进行两次测试。一种用于确保无效凭据 return 失败消息，另一种用于确保有效凭据成功登录

Answer 2

我和我的同事提出了解决方案：

vuex 动作需要 return promise，它们可以链接在一起：

login: (context, payload) => {
    context.commit('setFlashMessage', "");
    return axios.get("https://first-api-call")
        .then((response) => {
            return axios.post("https://second-api-call")
        })
        .then((response) => {
            // etc...
            router.push({ name: "Home"});
            context.commit('setFlashMessage', "Logged in successfully");
            context.commit('setLogin', response.data);
            return {status: "success"};
        });
},

然后我们不需要 chai-as-promised 因为测试看起来像这样：

it('bad password', () => {
    const result = store.dispatch("login", { username: userName, password: password + "bad" });
    return result.then((response) => {
        expect(response).to.deep.equal({ status: "failed"});
        store.getters.getFlashMessage.should.equal("Error logging in");
    });
});

测试包含异步的 vuex 操作

Testing vuex action that contains an async

unit-testing

vuejs2

chai

vuex

chai-as-promised