Question

发现问题，请仔细阅读

当前，经过几天又几天的配置，我接近配置的结尾。希望如此。

普遍存在的问题是“无法读取未定义的属性'components'”和[Vue警告]：无法装入组件：模板或渲染函数未定义。

即使是最基本的基础测试（如下所示），也要抛出Vue错误。

//import { mount } from "@vue/test-utils";
mount = require('@vue/test-utils').mount;
var pma = require('../components/profile-licenses').default;

let nacho;

beforeEach(() => {
    nacho = mount(pma)
});

afterEach(() => {
    nacho.destroy()
});

describe('ccp', () => {
    test('is a Vue instance', () => {
        expect(nacho.isVueInstance).toBeTruthy();
    });
});

以上解决方案用于解决[Vue警告]：无法装入组件：模板或渲染函数未定义。但是，这并不理想。它带来了更多的错误，并且看起来根本看不到vue-test-utils。

我遇到以下错误：

TypeError: Cannot read property 'components' of undefined
TypeError: Cannot read property 'isVueInstance' of undefined
TypeError: Cannot read property 'destroy' of undefined

这是我的设置。

package.json

{
"scripts": {
        "dev": "cross-env NUXT_PORT=8080 nuxt-ts",
        "build": "nuxt-ts build",
        "test": "jest"
    },
    "dependencies": {
        "@babel/runtime": "^7.7.7",
        "@nuxt/typescript-runtime": "^0.3.6",
        "@nuxtjs/axios": "^5.9.2",
        "@nuxtjs/pwa": "^3.0.0-beta.19",
        "@vue/cli": "^3.11.0",
        "body-parser": "^1.19.0",
        "cross-env": "^6.0.3",
        "mem": "^6.0.1",
        "nuxt": "^2.11.0"
    },
    "devDependencies": {
        "@babel/core": "^7.8.3",
        "@babel/preset-react": "^7.8.3",
        "@babel/preset-stage-0": "^7.8.3",
        "@babel/preset-typescript": "^7.8.3",
        "@nuxt/typescript-build": "^0.5.5",
        "@types/jest": "^24.9.1",
        "@vue/server-test-utils": "^1.0.0-beta.31",
        "@vue/test-utils": "^1.0.0-beta.30",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^24.9.0",
        "babel-loader": "^8.0.6",
        "jest": "^25.1.0",
        "nuxt-start": "^2.11.0",
        "ts-jest": "^24.3.0",
        "vue-jest": "^3.0.5",
        "vue-loader": "^15.8.3",
        "vue-template-compiler": "^2.6.11",
        "webpack-dev-server": "^3.10.1"
    },
    "babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react",
            "@babel/preset-typescript"
        ],
        "plugins": [
            "@babel/plugin-transform-runtime"
        ]
    },
    "jest": {
        "moduleFileExtensions": [
            "ts",
            "js",
            "json",
            "vue"
        ],
        "transform": {
            "^.*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
            "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
            "^.+\\.ts$": "<rootDir>/node_modules/ts-jest"
        },
        "transformIgnorePatterns": [
            "/node_modules/(?!(@babel/preset-typescript)/)"
        ],
"moduleNameMapper": {
            "@/(.*)$": "<rootDir>/$1",
            "vue$": "vue/dist/vue",
            "^vue$": "vue/dist/vue.common.js"
},
        "moduleDirectories": [
            ".",
            "node_modules",
            "client"
        ]
   }

webpack.config

var path = require('path').default;
const VueLoaderPlugin = require('node_modules/vue-loader/lib/plugin').default;
module.exports = {
    module: {
      loaders: [
        {exclude: ['node_modules'], loader: 'babel', test: /\.jsx?$/},
        {loader: 'style-loader!css-loader', test: /\.css$/},
        {loader: 'url-loader', test: /\.gif$/},
        {loader: 'file-loader', test: /\.(ttf|eot|svg)$/},
        {loader: 'vue-loader', test: /\.vue$/},
        {options: {
            loaders: {
            },
            esModule: false
          }}
      ],
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                presets: ['es2015']
              }
            }
          ]
        }, {
          test: /\.vue$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'vue-loader'
            }
          ]
        },
        {
          test: /\.js$/,
          include: [
            path.resolve(process.cwd(), 'node_modules/')
          ],
          use: [
            {
              loader: 'babel-loader',
              options: {
                plugins: ['transform-es2015-block-scoping'],
                cacheDirectory: true
              }
            }
          ],
        },
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
         },
      extensions: [ '.vue', '.ts', '.js'],
      modules: [
        'node_modules'
      ],
      plugins: [ new VueLoaderPlugin() ]
    }
  };

如果这是配置错误，我不会感到惊讶。我已经无休止的配置了好几天了。到目前为止，我尝试过的所有解决方案均无效。我正在尝试对一个包含很多组件并且不是SPA的项目进行测试。

编辑： 实际上，这不是配置问题！至少在当前情况下不是。

我尝试在其他两个文件上设置测试，发现其中几个文件可以运行而完全没有遇到任何Vue错误。

我遇到的越来越多的问题是由于存在一个我没有意识到的奇怪的父子关系。我们将Vue文件作为其自己的组件，并且还有一个弹出组件。

更靠近vue模板，我们使用来自原始组件的数据放置了弹出组件。因此出现“无法安装组件”错误！因为我从未告诉过测试要安装弹出组件！

整洁！（而且令人沮丧）

出于历史原因，将这个问题留给原样，尤其是因为我对那些为解决其晦涩问题提供解决方案的人表示赞赏。

Vue /笑话“无法读取未定义的属性'components'”

0 个答案: