对 Vue 插件进行单元测试

Question

我有一个 console.logs 数据的插件。

logData.spec.js

import Vue from 'vue'
import { createLocalVue } from '@vue/test-utils'
import logData from './logData'

describe('logData plugin', () => {
  const localVue = createLocalVue()
  it('adds a $logData method to the Vue prototype', () => {
    expect(Vue.prototype.$logData).toBeUndefined()
    localVue.use(logData)
    expect(typeof localVue.prototype.$logData).toBe('function')
  })
  it('console.logs data passed to it', () => {
    const data = 'data to be logged'
    const localVue = createLocalVue()
    localVue.use(logData)
    expect(localVue.prototype.$logData(data)).toBe('data to be logged')
  })
})

logData.js

export function logData (dataToLog) {
  const isLoggingData = localStorage.getItem('isLoggingData')
  if (isLoggingData) {
    console.log(dataToLog)
  }
}

export default {
  install: function (Vue) {
    Vue.prototype.$logData = logData
  }
}

我在单元测试中遇到的错误是预期的：“要记录的数据”，接收到的：未定义。为什么第二个测试被读取为未定义？

Answer 1

这是自 console.log() returns undefined 以来的预期行为。要获得期望的结果，您应该将这行代码添加到您的 lodData 函数中：

return dataToLog

export function logData (dataToLog) {
  const isLoggingData = localStorage.getItem('isLoggingData')
  if (isLoggingData) {
    console.log(dataToLog)
    return dataToLog
  }
}

注意：另外你的测试环境中没有localStorage。

对 Vue 插件进行单元测试

Unit testing a Vue plugin

javascript

vue.js

vue-test-utils