Vue-test-utils: TypeError: key.charAt is not a function

[ephemeralquark]

Version

1.0.0-beta.12

Reproduction link

https://github.com/ephemeralquark/vue-test-examples

Steps to reproduce

Clone above repo, npm install, npm test. The failure of key.charAt is not a function error message occurs when using vue-material plug-in on chrome headless with karma mocha tests.

What is expected?

Shallow mount the component and pass tests.

What is actually happening?

Throwing an error, see additional comments.

---

✗ "before each" hook for "should render correct contents"
TypeError: key.charAt is not a function
    at Object.has (webpack:///node_modules/vue/dist/vue.esm.js:1907:0 <- index.js:2034:50)
    at baseGetTag (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:1934:0 <- index.js:13906:44)
    at baseClone (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:4023:0 <- index.js:15995:15)
    at webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:4062:0 <- index.js:16034:31
    at arrayEach (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:2489:0 <- index.js:14461:9)
    at baseClone (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:4056:0 <- index.js:16028:3)
    at cloneDeep (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:4092:0 <- index.js:16064:10)
    at webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:4243:0 <- index.js:16215:11
    at Array.forEach (<anonymous>)
    at createLocalVue (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:4239:0 <- index.js:16211:20)

[dennythecoder]

Seems related to https://github.com/vuejs/vue-test-utils/issues/312

[eddyerburgh]

The problem is happening because VueMaterial is installed on the base Vue constructor. I'm not sure yet if the problem is with vue-test-utils. I'll look into it soon.

A workaround for the moment is to use a localVue, install VueMaterial, and pass the localVue to shallow:

import { mount, createLocalVue } from '@vue/test-utils'
import VueMaterial from 'vue-material'

const localVue = createLocalVue()
localVue.use(VueMaterial)

// ..
 wrapper = mount(HelloWorld, { localVue })
// ..

[iraklisg]

I have a similar issue when trying to test the Vue component in the following repo
https://github.com/laracasts/testingvue/tree/master/episode-5

1 failing

  1) CouponCode "before each" hook for "accepts a coupon code":
     TypeError: Cannot read property 'message' of undefined
      at VueComponent.message (.tmp/mocha-webpack/1521124112030/bundle.js:28481:40)
      at Watcher.get (.tmp/mocha-webpack/1521124112030/bundle.js:7977:25)
      at Watcher.run (.tmp/mocha-webpack/1521124112030/bundle.js:8054:22)
      at .tmp/mocha-webpack/1521124112030/bundle.js:4441:13
      at Array.forEach (<anonymous>)
      at VueComponent.update (.tmp/mocha-webpack/1521124112030/bundle.js:4440:18)
      at VueWrapper.setData (.tmp/mocha-webpack/1521124112030/bundle.js:1650:8)
      at Context.<anonymous> (.tmp/mocha-webpack/1521124112030/bundle.js:28353:17)

I am using version 1.0.0-beta.11 (1.0.0-beta.12 breaks the test due to #440)

EDIT: If a do not set wrapper data with setData() in the beforeEach hook, the test passes

[eddyerburgh]

@iraklisg This is a separate problem.

It looks like the issue is that selectedCoupon is not defined, but I might be wrong. Can you make a minimal reproduction of the bug, and create a new issue?

[iztsv]

@eddyerburgh did you want to mention @iraklisg ?

[eddyerburgh]

@ilyaztsv yes 😜

[iraklisg]

@eddyerburgh Apparently, I made haste to comment on this issue :no_mouth:

I further debug the aforementioned example and indeed the error was actually caused by the Vue component code itself and, specifically, by the computed property message which could not be calculated if the selectedCoupon computed property is undefined(see here)

I also made a minimal example to test setData and everything was ok :+1:

[dcherman]

@eddyerburgh For clarification, is it VueMaterial specific, or anything that calls .use on the global Vue instance? I'm running into the same problem, but we do not use VueMaterial at all. We do use other plugins that are globally installed though (VueRouter and PortalVue)

[dcherman]

@eddyerburgh I did a bit of debugging on this, and the gist of what the problem looks to be is that the renderProxy that Vue defines in non-production modes does not handle Symbols well when the is operator is used

https://github.com/vuejs/vue/blob/17d7a5f6bd28dda247ddeb02ed66ebc92182ded9/src/core/instance/proxy.js#L48

Symbols do not have a charAt function which results in this exception. The fix for this is likely going to be in Vue, and it'll probably be a simple typeof check in that hasHandler function

For anyone else looking at this, here's how I'm cheating around this problem till we get a patch in. This uses webpack, but you should be able to modify it for your build process:

const Proxy = window.Proxy;

window.Proxy = undefined;

const Vue = require('vue').default;

window.Proxy = Proxy;

I'm essentially just lying to Vue about the browser support to Proxy to avoid it going down that codepath at all in our tests. It just suppresses some Vue warnings that you'd normally get in development, so doesn't affect the execution of tests or this library at all.

[eddyerburgh]

Thanks @dcherman . I'm closing this since the fix will be in Vue core.

[odranoelBR]

@dcherman hi man.
i can't make it work with your code and realy need tests working.
Can u reproduce it ? thanks