5

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!

1 Answer 1

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
Sign up to request clarification or add additional context in comments.

1 Comment

Alright, I feel humbled. I should have seen that right away. Thank you acdcjunior!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.