Настройка vue-test-utils с получением TypeError: невозможно создать свойство '_Ctor' в строке

Я следил за этим руководством и это руководство для настройки шутливого тестирования с помощью vue-test-utils и vue 2 на Rails 5.1 с помощью webpacker. Я могу запускать базовые тесты без компонентов vue, но попытка смонтировать компоненты vue приводит к ошибке:

   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)

Мой тестовый файл PostAddress.test.js выглядит так:

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

Соответствующие части 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"
    },
  }

Сам компонент отлично работает из браузера (и это тривиально). Jest работал с простым утверждением expect(1 + 1).toBe(2);, прежде чем я добавил оператор let и попытался смонтировать / сделать компонент поверхностным.

Мне что-то еще нужно? Впервые использовал множество этих инструментов, поэтому спасибо за любые указатели!


person tgf    schedule 20.03.2018    source источник


Ответы (1)


Shallow принимает в качестве первого аргумента объект компонента, а не строковое имя.

Итак, меняем:

let wrapper = shallow('PostAddress');

в:

let wrapper = shallow(PostAddress);


Ссылка из официальных документов: https://vue-test-utils.vuejs.org/en/api/shallow.html:

shallow(component {, options}])

Аргументы:

  • {Component} компонент
  • {Object} вариантов
person acdcjunior    schedule 20.03.2018
comment
Хорошо, я чувствую себя униженным. Я должен был это сразу увидеть. Спасибо, acdcjunior! - person tgf; 20.03.2018