Question

所以我试图在我的项目中添加vue-test-utils：

我正在使用打字稿，vue js和vue-test-utils / jest

我关注了该文档：https://vue-test-utils.vuejs.org/guides/#using-with-typescript

一切都很好，但是当我运行测试时，我得到了这个错误：

yarn workspace v1.9.4
yarn run v1.9.4
warning package.json: No license field
$ jest
 FAIL  src/vue/__tests__/scriptR.spec.ts
  ● Test suite failed to run

    TypeError: Class extends value undefined is not a constructor or null

      21 |
      22 | @Component
    > 23 | export default class PageScriptR extends Vue {
         | ^
      24 |     tests = ['T','TIB & TATOUM']

      at ../modules/youdub-scriptR/vue/pages/scriptR.vue:23:1
      at Object.<anonymous> (../modules/youdub-scriptR/vue/pages/scriptR.vue:26:3)
      at Object.<anonymous> (src/vue/__tests__/scriptR.spec.ts:2:1)


[vue-jest]: no .babelrc found, skipping babel compilation

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.93s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/bin/node
Arguments: /usr/lib/node_modules/yarn/lib/cli.js run test:unit
Directory: /application/src/youdub-mainapp/app
Output:

这是我的Vue文件：

<template>
    <div>
        <b-table :data="tests">
            <template slot-scope="props">
                <b-table-column field="caracterisation" label="Caractérisation" centered>
                    {{tests[0]}}
                </b-table-column>
                <b-table-column field="fragment" label="Fragment" centered>
                    {{tests[1]}}
                </b-table-column>
            </template>
        </b-table>
    </div>
</template>

<script lang="ts">

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class PageScriptR extends Vue {
    tests = ['Foo','Bar']
}
</script>

我的测试文件：

import { shallowMount } from '@vue/test-utils'
import ScriptR from '../../../../modules/youdub-scriptR/vue/pages/scriptR'

describe('ScriptR', () => {
    test('array not empty', () => {
        const wrapper: any = shallowMount(ScriptR, {
            propsData: {
                tests: ['foo']
            }
        })
        expect(wrapper.props().tests).toBe(['foo'])
    })
})

我的包：json：

{
    "name": "youdub-mainapp",
    "description": "A small Webpack + Vue.js + Typescript project",
    "version": "1.0.0",
    "scripts": {
        "test:unit": "jest",
        "build:node": "tsc -p src/node/tsconfig.server.json",
        "build:vue": "webpack --progress --hide-modules",
        "build:dll": "webpack --config=webpack.dll.js",
        "build": "npm run build:node && npm run build:dll && npm run build:vue",
        "dev": "NODE_ENV=development concurrently --names 'tsc,tsc-shared,node,webpack' 'tsc --watch -p src/node/tsconfig.server.json' 'tsc --watch -p ../../shared/tsconfig.server.json' 'nodemon --watch src/youdub-mainapp/src/node --inspect=0.0.0.0:9229 src/node/app.js' 'npm run build:dll'"
    },
    "types": "./src/vue/types/vue.d.ts",
    "dependencies": {
        "nodemon": "^1.12.1",
        "shared": "^1.0.0"
    },
    "devDependencies": {
        "@vue/test-utils": "^1.0.0-beta.24",
        "concurrently": "^3.5.0",
        "jest": "^23.5.0",
        "ts-jest": "^23.1.4",
        "typescript": "^2.5.3",
        "vue-jest": "^2.6.0",
        "webpack": "2.7.0",
        "webpack-livereload-plugin": "^1.0.0"
    },
    "jest": {
        "moduleFileExtensions": [
            "js",
            "ts",
            "json",
            "vue"
        ],
        "transform": {
            ".*\\.(vue)$": "vue-jest",
            "^.+\\.tsx?$": "ts-jest"
        },
        "testURL": "http://localhost/",
        "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
    }
}

我昨天搜索并阅读了很多东西，但找不到任何解决方案。感谢您的宝贵时间。

Answer 1

我可以重现同样的问题。

可能在行下导致错误。

import Vue from 'vue'

↓

请在下面替换为

import { Vue } from "nuxt-property-decorator";

vue-test-utils错误TypeError：运行测试时，类扩展值未定义的值不是构造函数或null

1 个答案: