unit-testing - Vuex 中的单元测试抛出 AssertionError 等于 { Object (type, text) }

Question

到目前为止，对 Vuex 操作进行单元测试一直是一场噩梦，我似乎无法理解它实际上在寻找什么。我正在关注 https://vuex.vuejs.org/en/testing.html并使用他们的 Action 辅助函数。

我有一个将文本添加到按钮的简单操作。

createButton({ commit, state }, payload) {
    let btnString = '';

    if (payload.hasCookie) {
        btnString = 'Welcome back';
    } else if (payload.isLoggedIn) {
        btnString = 'Sign out';
    } else {
        btnString = 'Sign up';
    }

    commit({ type: 'CREATE_BUTTON_TEXT', text: btnText });
},

在我的测试中...

describe('Create Button Text', () => {
        it('should render the buttons string ', (done) => {
            const expectedString = 'Welcome back';
            const mock = {
                hasCookie: true,
                isLoggedIn: false,
            };

            testAction(actions.createButton, mock, state, [
                { type: 'CREATE_BUTTON_TEXT', text: expectedString },
            ], done);
        });
    });

它正在返回 AssertionError: expected 'CREATE_BUTTON_TEXT' to equal { Object (type, text) }... 我没有提供预期的 text 和 expectedString 正确吗？非常感谢有关此事的任何指导。

(根据文档中的建议使用 Mocha + Chai)。

Answer 1

看来您的提交语法有误。如果您使用了 testAction 帮助器，则参数 expectedMutations 需要一个具有类型和负载的对象列表。 以下代码对我有用:

createButton({ commit, state }, payload) {
  let btnString = ''

  if (payload.hasCookie) {
    btnString = 'Welcome back'
  } else if (payload.isLoggedIn) {
    btnString = 'Sign out'
  } else {
    btnString = 'Sign up'
  }

  commit('CREATE_BUTTON_TEXT', btnString)
}

及测试方法:

describe('Create Button Text', () => {
 it('should render the buttons string ', (done) => {
  const expectedString = 'Welcome back'
  const mock = {
   hasCookie: true,
   isLoggedIn: false
  }

  testAction(actions.createButton, mock, {}, [
   { type: 'CREATE_BUTTON_TEXT', payload: expectedString }
  ], done)
 })
})