为什么vue-jest无法在我的测试文件中正确安装Bootstrap-vue？

问题描述

谢谢您的回答！

这是我的问题：我想用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并重新安装，这是同样的问题。

感谢您的回答。

祝你有美好的一天！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-vue jestjs vue.js