Я пытаюсь выполнить модульные тесты с помощью jest и bootstrap-vue, но получаю ошибки в тегах Bootstrap-vue, такие как:
- [Vue warn]: неизвестный пользовательский элемент: b-navbar - не так липравильно зарегистрировать компонент? ...
- [Vue warn]: неизвестный пользовательский элемент: b-navbar-nav - вы правильно зарегистрировали компонент? …
- [Vue warn]: неизвестный пользовательский элемент: кнопка b - вы правильно зарегистрировали компонент? …
Ниже приведен исходный код, который может помочь вам понять, как решить мою проблему ... ;-) Спасибо
// Package.json
{
"name": "theappname",
"version": "1.0.0",
"repository": {
"type": "git",
"url": ""
},
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --open",
"dev": "cross-env NODE_ENV=development webpack-dev-server --progress",
"staging": "cross-env NODE_ENV=staging webpack",
"build": "cross-env NODE_ENV=production webpack",
"test": "jest",
"test:debug": "node --inspect node_modules/.bin/jest --runInBand",
"test:debugw": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.11.2",
"babel-jest": "^24.9.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.2",
"file-loader": "^4.2.0",
"jquery": "^1.9.1",
"postcss-loader": "^3.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"vee-validate": "^2.2.8",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue": "^2.0.2",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"node-sass": "^4.12.0",
"path": "^0.12.7",
"sass": "^1.22.12",
"sass-loader": "^8.0.0",
"vue-jest": "^3.0.5",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1"
},
"jest": {
"moduleFileExtensions": [
"jsx",
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules"
],
"testMatch": [
"**/test/unit/**/*.spec.(js|jsx|ts|tsx)|**/test/*.(js|jsx|ts|tsx)"
]
}
}
`// Webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.vue']
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.vue?$/,
exclude: /(node_modules)/,
use: 'vue-loader'
},
{
test: /\.js?$/,
exclude: /(node_modules)/,
use: 'babel-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
outputPath: './public',
}
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
fallback: 'file-loader'
}
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
fallback: 'file-loader'
}
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/image/svg+xml',
fallback: 'file-loader'
}
},{
// Apply rule for .sass or .scss files
test: /\.(sa|sc)ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
]
}
]
},
entry: {
index: './src/index.js'//,
//adminApp: './src/index.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: 'build.js'
},
plugins: [new HtmlWebpackPlugin({
favicon: './src/public/favicon.png',
template: './src/index.html',
filename: "./index.html"/*,
publicPath: '/public/'*/
})],
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:3001/api/v1'
})
}
}
//components.Navbar.spec.js
import BootstrapVue, { BNavbar, BNavbarBrand } from 'bootstrap-vue';
import Vuex from 'vuex'
import Router from 'vue-router';
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import Navbar from '@/components/Navbar';
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(Router);
debugger;
localVue.use(BootstrapVue/*,{
components: {
BNavbar: true,
BNavbarBrand: true
}
}*/);
const router = new Router();
const mockActions = {
// fetchSomething: sinon.stub()
};
const store = new Vuex.Store({
state: {
account: {
status: {
loggedIn: false
}
}
}
});
describe('Navbar.vue', () => {
let wrapper;
beforeEach(()=>{
wrapper = shallowMount(Navbar, {
localVue,
store,
router/*,
stubs: {
"b-navbar": BNavbar,
"b-navbar-brand": BNavbarBrand
}*/
});
});
it("renders a vue instance", () => {
const wrapper = shallowMount(Navbar, {
computed: {
isConnected: (state) => {
if (state.account && state.account.status && state.account.status.loggedIn){
return true;
}
return false;
}
},
mocks: {
$store: {
state: { account: { status: { loggedIn: false } } }
}
}
})
expect(wrapper.isVueInstance()).toBe(true);
});
})
//Navbar.vue
<template>
<div>
<b-navbar toggleable="lg">
<b-navbar-brand href="/"><img src="../assets/logo_250.png">theappname</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">bla bla</b-nav-item>
<b-nav-item href="#">bla bla</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav v-if="isConnected" class="ml-auto">
…
<b-navbar-nav class="ml-auto" v-else>
….
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
data() {
return {
item: ''
}
},
computed: {
...mapState({
account: state => state.account
}),
isConnected: function () {
if (this.account && this.account.status && this.account.status.loggedIn){
return true;
}
return false;
}
},
methods: {
...mapActions('account', ['logout']),
}
}