Unit testing a Vue plugin

Question

I have a plugin that console.logs data.

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
  }
}

The error I get is in my unit test is Expected: 'data to be logged", Received: undefined. Why is the second test being read as undefined?

What's logData file look like? – danronmoon Aug 20 '19 at 17:26 — danronmoon, Aug 20 '19 at 17:26

score 2 · Accepted Answer · answered Aug 20 '19 at 17:55

2

It's expected behavior since console.log() returns undefined. To get desired result you should add this line of code to your lodData function:

return dataToLog

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

NOTICE: Also you don't have localStorage in your test environment.

answered Aug 20 '19 at 17:55

Andrew Vasylchuk

4,671
2
12
30

Yes, the "global coverage for branches is below 95%" means I need to test if the localStorage property exists. I guess I just need to add a localStorage object to the second test and check if 'isLoggingData' exists? – Kevin T. Aug 20 '19 at 18:02
You need to mock it. https://medium.com/3yourmind/testing-vue-components-a-cheat-sheet-299b3b8be88d – Andrew Vasylchuk Aug 20 '19 at 18:05
I'm lost on this – Kevin T. Aug 20 '19 at 18:27
@Javas The return value of `console.log` is not relevant, since nothing is returned at all (which is the actual cause of `undefined` in this case). – tony19 Aug 20 '19 at 19:02
@tony19, Yes, in that case it is. But if he manages to mock the `localStorage`, this line will help him to pass his test. – Andrew Vasylchuk Aug 20 '19 at 19:05
I understand why I recieved undefined, It's just that I'm lost implementing a mock localStorage to add to my unit test. I looked https://stackoverflow.com/questions/32911630/how-do-i-deal-with-localstorage-in-jest-tests, and https://github.com/facebook/jest/issues/2098] and it's just very confusing. – Kevin T. Aug 20 '19 at 19:09
@Javas The title of the test indicates the OP is trying to verify the given data is actually logged by `console.log`. The return of the log function seems like a *flawed* approach to verify that, as Jest already supports verifying call arguments of a mock. – tony19 Aug 20 '19 at 19:09
@tony19, you are absolutely right. Modify my answer or write your own. – Andrew Vasylchuk Aug 20 '19 at 19:11

Unit testing a Vue plugin

1 Answers1