时间戳

首页 > 解决方案 > 单元测试 Vue 插件

javascript - 单元测试 Vue 插件

问题描述

我有一个 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')
  })
})

日志数据.js

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

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

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

标签： javascriptvue.jsvue-test-utils

解决方案

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

return dataToLog

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

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

推荐阅读