单元测试 Vue 插件

Posted 2023-03-08

【中文标题】单元测试 Vue 插件

【英文标题】：Unit testing a Vue plugin

【发布时间】：2019-12-25 23:14:51

【问题描述】：

我有一个控制台记录数据的插件。

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
  

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

【问题讨论】：

logData 文件是什么样的？

@danronmoon，添加文件。

【参考方案1】：

这是预期的行为，因为 console.log() 返回 undefined。要获得所需的结果，您应该将这行代码添加到您的 lodData 函数中：

return dataToLog

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

注意：您的测试环境中也没有localStorage。

【讨论】：

是的，“分支的全局覆盖率低于 95%”意味着我需要测试 localStorage 属性是否存在。我想我只需要在第二个测试中添加一个 localStorage 对象并检查“isLoggingData”是否存在？

你需要模拟它。 medium.com/3yourmind/…

我迷路了

@Javas console.log 的返回值无关紧要，因为根本没有返回任何内容（在这种情况下这是 undefined 的实际原因）。

@tony19，是的，在这种情况下是这样。但如果他设法模拟了localStorage，这条线将帮助他通过测试。