使用参数 returns undefined 测试 Vuex getters 不是一个函数

Question

我有 karma 和 chai 设置，我正在尝试遵循 Testing Getters 示例 here

这是我的 fruits.js 商店代码

// fruits.js store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const fruits = new Vuex.Store({
  state: {
    fruits: [
      {id: 1, name: 'Apple'},
      {id: 2, name: 'Banana'},
      {id: 3, name: 'Orange'}
    ]
  },
  mutations: {
  },
  actions: {
  },
  getters: {
    getFruitById (state, {id}) {
      return state.fruits.find(fruit => {
        return fruit.id === id
      })
    }
  }
})

这是我的 fruit.spec.js 文件

// fruit.spec.js
import { expect } from 'chai'
import { fruits } from '../../../../src/store/fruits'

describe('getters', () => {
  it('getFruitById()', () => {
    // mock data
    const state = {
      fruits: [
        {id: 1, name: 'Apricot'},
        {id: 2, name: 'Kiwi'},
        {id: 3, name: 'Watermelon'}
      ]
    }
    const id = 1
    // find fruit by id
    const result = fruits.getters.getFruitById(state, {id})
    expect(result).to.deep.equal([
      {
        id: 1,
        name: 'Apricot'
      }
    ])
  })
})

当我运行我的 fruit.spec.js 测试它时 returns

undefined is not a function在线const result = fruits.getters.getFruitById(state, {id})

问题是我在fruit.spec.js中的模拟状态没有传入fruit.js

如何才能通过测试？

Answer 1

如果你想对你的 getter 进行单元测试，你应该单独导出它们：

// fruits.js store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const getters = {
  getFruitById (state, {id}) {
    return state.fruits.find(fruit => {
      return fruit.id === id
    })
  }
}

export const fruits = new Vuex.Store({
  state: {
    fruits: [
      {id: 1, name: 'Apple'},
      {id: 2, name: 'Banana'},
      {id: 3, name: 'Orange'}
    ]
  },
  mutations: {
  },
  actions: {
  },
  getters,
})

然后可以在单元测试中按如下方式访问：

import { getters } from '../../../../src/store/fruits'
// ...
    const result = getters.getFruitById(state, {id})
// ....

使用参数 returns undefined 测试 Vuex getters 不是一个函数

Testing Vuex getters with argument returns undefined is not a function

javascript

vue.js

vuejs2

chai

vuex