vue-test-utils setup getting TypeError: Cannot create property '_Ctor' on string

Question

I've been following this guide and this guide to setup jest testing with vue-test-utils and vue 2 on Rails 5.1 with webpacker. I'm able to run basic tests without vue components but attempting to mount vue components results in the error:

   TypeError: Cannot create property '_Ctor' on string 'PostAddress'

       7 |
       8 |   it('mounts', () => {
    >  9 |     let wrapper = shallow('PostAddress');
      10 |
      11 |     expect(1 + 1).toBe(2);
      12 |   });

      at Function.Vue.extend (node_modules/vue/dist/vue.runtime.common.js:4785:67)
      at createConstructor (node_modules/@vue/test-utils/dist/vue-test-utils.js:4562:25)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:4654:12)
      at shallow (node_modules/@vue/test-utils/dist/vue-test-utils.js:4691:10)
      at Object.<anonymous> (spec/javascript/PostAddress.spec.js:9:19)

My test file PostAddress.test.js looks like:

import { mount } from '@vue/test-utils'  // mounts with children
import { shallow } from '@vue/test-utils' // mounts without children

import PostAddress from 'packs/components/PostAddress.vue';


describe('PostAddress', () => {
  it('mounts', () => {
    let wrapper = shallow('PostAddress');

    expect(1 + 1).toBe(2);
  });
});

The relevant parts of package.json:

  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.12",
    "babel-jest": "^23.0.0-alpha.0",
    "babel-preset-es2015": "^6.24.1",
    "jest": "^22.4.2",
    "vue-jest": "^2.2.1",
    "webpack-dev-server": "2.11.2"
  },
  "jest": {
    "roots": [
      "spec/javascript"
    ],
    "moduleDirectories": [
      "node_modules",
      "app/javascript"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
  }

The component itself works fine from the browser (and is trivial). Jest was working with a simple expect(1 + 1).toBe(2); assertion before I added the let statement and tried to mount/shallow the component.

Is there something else I need? First time using a lot of these tools, so thanks for any pointers!

Answer 1

Shallow takes the component object as first argument, not a string name.

So, change:

let wrapper = shallow('PostAddress');

into:

let wrapper = shallow(PostAddress);

Reference from the official docs: https://vue-test-utils.vuejs.org/en/api/shallow.html:

shallow(component {, options}])

Arguments:

• {Component} component
• {Object} options