vue.js - 为什么 vue-jest 没有在我的测试文件中正确安装 Bootstrap-vue？

Question

预先感谢您的回答！

这是我的问题：我想用 Jest 进行单元测试。

我测试了我的组件（登录表单）并在此组件中使用：Bootstrap-vue。所以在我的测试文件中，我包含了 Bootrap-vue，来自 vue-test-utils 的 createLocalVue。

但我得到一个错误：

TypeError：无法读取未定义的属性“已安装”

  12 | Vue.use(Vuetify);
  13 | localVue.use(VueAxios,axios);
> 14 | localVue.use(BootstrapVue);
     |          ^
  15 | localVue.use(IconsPlugin);
  16 | 
  17 | 

  at Function.use (node_modules/@vue/test-utils/dist/vue-test-utils.js:13742:16)
  at Object.<anonymous> (test/unit/specs/components/form/login.spec.js:14:10)

这是我的文件 login.spec.js（测试文件）：

import 'es6-promise/auto';
import Vue from 'vue';
import Vuetify from 'vuetify';
import axios from 'axios';
import VueAxios from 'vue-axios';
import { shallowMount, createLocalVue, mount } from '@vue/test-utils';
import { BootstrapVue, IconsPlugin  } from 'bootstrap-vue';

import FormLogin from '@/components/Form/login';

const localVue = createLocalVue();
Vue.use(Vuetify);
localVue.use(VueAxios,axios);
localVue.use(BootstrapVue);
localVue.use(IconsPlugin);


let wrapper = null;



describe('FormLogin', () => {
    beforeEach(() => {
        const vuetify = new Vuetify();

        wrapper = shallowMount(FormLogin,{
            localVue,
            vuetify
        });
    });
    
    afterEach(() => {
        wrapper.destroy();
    });
    
    it('contains input text',() => {
        const type = wrapper.find('input').map((node) =>node.props().type);
        const text = type.filter((e) => e === 'text').length === 1;
        expect(text).toBe(true);
    });

    it('contains input password',() => {
        const type = wrapper.find('input').map((node) =>node.props().type);
        const password = type.filter((e) => e === 'password').length === 1;
        expect(password).toBe(true);
    });

    it('contains button', () => {
        expect(wrapper.find('button').toBe(true));    
    })
});

还有我的配置文件：

jest.config.js ：

const path = require('path')

module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  setupFiles: ['setup.js'],
  moduleFileExtensions: [
    'js',
    'json',
    'vue',
    'ts'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    'vue$': "vue/dist/vue.common.js",
  },
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/coverage/',
    '<rootDir>/dist/',
    '<rootDir>/node_modules/'
  ],
  //snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ],
  transformIgnorePatterns: ['node_modules/core.js','node_modules/babel-runtime','node_modules/vue',"node_modules/(?!bootstrap-vue)"]
}

.babelrc

{
  "presets": [
      "@babel/preset-flow",
      "@babel/preset-react",
    
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
      /*{
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }*/
    ]
  ],
  "plugins": [
    "transform-vue-jsx",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2
      }
    ],
    "babel-plugin-styled-components",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    "transform-class-properties",
  "syntax-class-properties",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions"
  ]
}

我搜索了更多 1 周，但我没有找到同样的问题。或者这不是好的解决方案。我试图删除我的 node_modules 并重新安装，这是同样的问题。

我感谢你的回答。

祝你有美好的一天 ！！

标签： vue.jsjestjsbootstrap-vue