sourcecode

vue-test-utils 설정 typeError: 문자열에 속성 '_Ctor'를 생성할 수 없습니다.

copyscript 2022. 8. 16. 23:34
반응형

vue-test-utils 설정 typeError: 문자열에 속성 '_Ctor'를 생성할 수 없습니다.

가이드와 이 가이드따라 웹패커를 탑재한 레일 5.1에서 vue-test-utils 및 vue 2를 사용한 재스트 테스트를 설정했습니다.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"
    },
  }

컴포넌트 자체는 브라우저에서 정상적으로 동작합니다(단순합니다).Jeest는 단순하게 일하고 있었다.expect(1 + 1).toBe(2);추가하기 전의 어소션let명령어를 사용하여 컴포넌트를 마운트/마운트하려고 했습니다.

제가 더 필요한 게 있나요?처음 사용하는 도구들이 많으니 조언해 주셔서 감사합니다!

Shallow는 구성 요소 개체를 문자열 이름이 아닌 첫 번째 인수로 사용합니다.

변경:

let wrapper = shallow('PostAddress');

다음과 같이 입력합니다.

let wrapper = shallow(PostAddress);


공식 문서: https://vue-test-utils.vuejs.org/en/api/shallow.html:

shallow(component {, options}])

인수:

  • {Component}요소
  • {Object}옵션들

언급URL : https://stackoverflow.com/questions/49390076/vue-test-utils-setup-getting-typeerror-cannot-create-property-ctor-on-string

반응형