I've been encountering errors while trying to set up unit tests with jest and bootstrap-vue. The errors specifically mention unknown custom elements like:
- [Vue warn]: Unknown custom element: b-navbar - did you register the component correctly?...
- [Vue warn]: Unknown custom element: b-navbar-nav - did you register the component correctly? …
- [Vue warn]: Unknown custom element: b-button - did you register the component correctly? …
Below is the source code that may provide some insight into resolving this issue. Your help would be greatly appreciated! ;-)
//Package.json
{
"name": "theappname",
"version": "1.0.0",
"repository": {
"type": "git",
"url": ""
},
// Other package.json content...
}
`//Webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.vue']
},
module: {
rules: [
// Webpack configuration rules...
]
},
entry: {
index: './src/index.js'
},
// Output configuration...
plugins: [new HtmlWebpackPlugin({
favicon: './src/public/favicon.png',
template: './src/index.html',
filename: "./index.html"
})],
devServer: {
// Dev server configurations...
},
externals: {
// External config object settings...
}
}
//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';
// Test file for Navbar component...
//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>
// Navbar component HTML structure...
</b-navbar>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
// Vue component logic...
}