Why it seems that jest does not detect scss? - vue.js

Question

I've been working for some days in a unit testing. It seems to work well but it shows some warnings about the scss that I don't know how to solve.
The component is this one:
<template>
<div id="cb-nav-sidebar">
<div class="project-name">
<el-button
:icon="'el-icon-s-' + (!isCollapsed ? 'fold' : 'unfold')"
type="text"
#click="toggle"
/>
<h5 v-show="!isCollapsed" class="bold">{{ project.name }}</h5>
</div>
<NavSidebarMenu
position="top"
:items="menuTop"
:is-collapsed="isCollapsed"
></NavSidebarMenu>
<NavSidebarMenu
position="bottom"
:items="menuBottom"
:is-collapsed="isCollapsed"
></NavSidebarMenu>
</div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import NavSidebarMenu from '#/components/NavSidebarMenu.vue'
import { NavSidebarMenuItems } from '#/models/NavSidebarMenu'
import { PROCESS_ENV } from '#/utils/legacy/process-env'
import { getCurrentOrganization, Organizations } from '#/models/Organizations'
const { t } = useI18n({})
const MENU_ITEMS_TOP = [
{
label: 'analysis',
icon: 'el-icon-s-data',
path: '/analysis/',
external: false,
},
{
label: 'compare',
icon: 'el-icon-copy-document',
path: '/benchmark/',
external: true,
},
{
label: 'discovery',
icon: 'el-icon-discover',
path: '/discovery/',
external: false,
},
{
label: 'map',
icon: 'el-icon-location-information',
path: '/map/',
external: true,
},
]
const MENU_ITEMS_BOTTOM = [
{
label: 'categorize',
icon: 'el-icon-s-operation',
path: '/categorize/',
external: true,
},
{
label: 'settings',
icon: 'el-icon-setting',
path: '/project-settings/',
external: true,
},
{
label: 'export_data',
icon: 'el-icon-download',
path: '/export_data/export_data/export_csv',
external: true,
},
]
const store = useStore()
const route = useRoute()
let isCollapsed = false
// TODO: avoid duplicated code in TopNavBar.vue
const project = computed(() => {
return store.getters['project/getCurrent']
})
const projectHasMap = computed(() => {
const value = project.value
return value.options['settings:has_map'] === '1'
})
const projectHasBenchmark = computed(() => {
const value = project.value
return value.datasets.length > 4
})
const menuTop = computed(() => {
return makeMenuItems(availableMenuItemsTop)
})
const menuBottom = computed(() => {
return makeMenuItems(availableMenuItemsBottom)
})
const orgPath = computed(() => {
const orgSlug = route.params.orgSlug
const prjSlug = route.params.prjSlug
return `/organization/${orgSlug}/project/${prjSlug}`
})
const externalOrgPath = computed(() => {
const orgSlug = route.params.orgSlug
const prjSlug = route.params.prjSlug
return PROCESS_ENV.legacyUrl + `/organization/${orgSlug}/${prjSlug}`
})
function toggle() {
// HACK: toggle disabled -> todo layout width should change when menu is collapsed
// this.isCollapsed = !this.isCollapsed
isCollapsed = false
}
function makeMenuItems(items: NavSidebarMenuItems[]) {
return items.map((item) => {
const orgPathFinal = item.external ? externalOrgPath.value : orgPath.value
return {
...item,
label: t(`components.project_sidebar.menu.${item.label}`),
section: item.path,
path: `${orgPathFinal}${item.path}`,
}
})
}
function getAvailableMenuItemsTop() {
const items: NavSidebarMenuItems[] = []
MENU_ITEMS_TOP.forEach((item: any) => {
if (item.label === 'map' && !projectHasMap.value) {
return
}
if (item.label === 'compare' && !projectHasBenchmark.value) {
return
}
items.push(item)
})
return items
}
function getAvailableMenuItemsBottom() {
const items: NavSidebarMenuItems[] = []
const organizations: Organizations = route?.meta
?.organizations as Organizations
const organization = getCurrentOrganization(
organizations,
route.params.orgSlug as string
)
const userRole = organization.role
MENU_ITEMS_BOTTOM.forEach((item: any) => {
if (
(item.label === 'categorize' || item.label === 'settings') &&
userRole === 'viewer'
) {
return
}
items.push(item)
})
return items
}
const availableMenuItemsTop = getAvailableMenuItemsTop()
const availableMenuItemsBottom = getAvailableMenuItemsBottom()
</script>
<style lang="scss">
#cb-nav-sidebar {
overflow: hidden;
height: calc(100vh - 76px);
display: flex;
flex-direction: column;
.project-name {
padding: 1.3px 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--color-tertiary-400);
h5 {
font-size: var(--font-size--body);
font-family: 'Roboto-Bold';
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button {
display: flex;
margin-right: 8px;
i {
padding-left: 4px;
font-size: var(--font-size--headline);
color: var(--color-primary-800);
}
}
}
}
</style>
While the test is the following:
import { render } from '#tests/app-test-utils'
import '#testing-library/jest-dom'
/* eslint #typescript-eslint/no-var-requires: "off" */
let mockStoreCommit: jest.Mock
const renderComponent = (getters: any) => {
const ProjectNavSidebar = require('./ProjectNavSidebar.vue').default
jest.mock('vuex', () => ({
...jest.requireActual('vuex'),
useStore: () => ({
getters: getters,
commit: mockStoreCommit,
}),
}))
jest.mock('vue-router', () => ({
useRoute: () => ({
params: {
orgSlug: 'test',
},
meta: {
organizations: [{ slug: 'test' }, { slug: 'test2' }],
},
}),
}))
render(
ProjectNavSidebar,
{},
{
props: {
type: 'categories',
menuType: 'checkbox',
items: [
{
box_templates: '',
id: '1',
name: 'Culture',
},
{
box_templates: '',
id: '2',
name: 'Economy',
},
{
box_templates: '',
id: '3',
name: 'Education',
},
],
},
}
)
}
describe('NavSidebarMenu', () => {
beforeEach(() => {
jest.resetModules()
})
it('renders', () => {
renderComponent({
['project/getCurrent']: {
options: { 'setting:has_map': '1' },
datasets: ['dataset_1', 'dataset_2', 'dataset_3'],
},
})
})
})
The error that appears when testing:
console.warn
[Vue warn]: resolveComponent can only be used in render() or setup().
185 | overflow: hidden;
186 | height: calc(100vh - 76px);
> 187 | display: flex;
| ^
188 | flex-direction: column;
189 | .project-name {
190 | padding: 1.3px 10px;
at warn (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:6799:17)
at resolveAsset (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5515:9)
at resolveComponent (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5463:12)
at Proxy.render (src/components/project/ProjectNavSidebar.vue:187:59)
at renderComponentRoot (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:754:44)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4469:57)
at ReactiveEffect.run (node_modules/#vue/reactivity/dist/reactivity.cjs.js:164:29)
console.warn
[Vue warn]: withDirectives can only be used inside render functions.
193 | border-bottom: 1px solid var(--color-tertiary-400);
194 |
> 195 | h5 {
| ^
196 | font-size: var(--font-size--body);
197 | font-family: 'Roboto-Bold';
198 | white-space: nowrap;
at warn (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:6799:17)
at withDirectives (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:3291:9)
at Proxy.render (src/components/project/ProjectNavSidebar.vue:195:38)
at renderComponentRoot (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:754:44)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4469:57)
at ReactiveEffect.run (node_modules/#vue/reactivity/dist/reactivity.cjs.js:164:29)
at setupRenderEffect (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4595:9)
console.warn
[Vue warn]: resolveComponent can only be used in render() or setup().
57 | height: 100%;
58 | &.el-menu {
> 59 | .el-menu-item {
| ^
60 | text-align: left;
61 | }
62 | }
at warn (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:6799:17)
at resolveAsset (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5515:9)
at resolveComponent (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5463:12)
at Proxy.render (src/components/NavSidebarMenu.vue:59:62)
at renderComponentRoot (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:754:44)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4469:57)
at ReactiveEffect.run (node_modules/#vue/reactivity/dist/reactivity.cjs.js:164:29)
console.warn
[Vue warn]: resolveComponent can only be used in render() or setup().
58 | &.el-menu {
59 | .el-menu-item {
> 60 | text-align: left;
| ^
61 | }
62 | }
63 | &.el-menu--collapse {
at warn (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:6799:17)
at resolveAsset (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5515:9)
at resolveComponent (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5463:12)
at Proxy.render (src/components/NavSidebarMenu.vue:60:57)
at renderComponentRoot (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:754:44)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4469:57)
at ReactiveEffect.run (node_modules/#vue/reactivity/dist/reactivity.cjs.js:164:29)
console.warn
[Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol)
at <Anonymous position="top" items= [
{
label: 'components.project_sidebar.menu.analysis',
icon: 'el-icon-s-data',
path: '/organization/test/project/undefined/analysis/',
external: false,
section: '/analysis/'
},
{
label: 'components.project_sidebar.menu.discovery',
icon: 'el-icon-discover',
path: '/organization/test/project/undefined/discovery/',
external: false,
section: '/discovery/'
}
] is-collapsed=false >
at <Anonymous type="categories" menuType="checkbox" items= [
{ box_templates: '', id: '1', name: 'Culture' },
{ box_templates: '', id: '2', name: 'Economy' },
{ box_templates: '', id: '3', name: 'Education' }
] ... >
at <VTUROOT>
at warn (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:6799:17)
at patch (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:3951:21)
at mountChildren (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4127:13)
at mountElement (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4037:17)
at processElement (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4019:13)
at patch (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:3939:21)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4476:21)
console.warn
[Vue warn]: resolveComponent can only be used in render() or setup().
57 | height: 100%;
58 | &.el-menu {
> 59 | .el-menu-item {
| ^
60 | text-align: left;
61 | }
62 | }
at warn (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:6799:17)
at resolveAsset (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5515:9)
at resolveComponent (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5463:12)
at Proxy.render (src/components/NavSidebarMenu.vue:59:62)
at renderComponentRoot (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:754:44)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4469:57)
at ReactiveEffect.run (node_modules/#vue/reactivity/dist/reactivity.cjs.js:164:29)
console.warn
[Vue warn]: resolveComponent can only be used in render() or setup().
58 | &.el-menu {
59 | .el-menu-item {
> 60 | text-align: left;
| ^
61 | }
62 | }
63 | &.el-menu--collapse {
at warn (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:6799:17)
at resolveAsset (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5515:9)
at resolveComponent (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:5463:12)
at Proxy.render (src/components/NavSidebarMenu.vue:60:57)
at renderComponentRoot (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:754:44)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4469:57)
at ReactiveEffect.run (node_modules/#vue/reactivity/dist/reactivity.cjs.js:164:29)
console.warn
[Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol)
at <Anonymous position="bottom" items= [
{
label: 'components.project_sidebar.menu.categorize',
icon: 'el-icon-s-operation',
path: 'http://localhost:8000/organization/test/undefined/categorize/',
external: true,
section: '/categorize/'
},
{
label: 'components.project_sidebar.menu.settings',
icon: 'el-icon-setting',
path: 'http://localhost:8000/organization/test/undefined/project-settings/',
external: true,
section: '/project-settings/'
},
{
label: 'components.project_sidebar.menu.export_data',
icon: 'el-icon-download',
path: 'http://localhost:8000/organization/test/undefined/export_data/export_data/export_csv',
external: true,
section: '/export_data/export_data/export_csv'
}
] is-collapsed=false >
at <Anonymous type="categories" menuType="checkbox" items= [
{ box_templates: '', id: '1', name: 'Culture' },
{ box_templates: '', id: '2', name: 'Economy' },
{ box_templates: '', id: '3', name: 'Education' }
] ... >
at <VTUROOT>
at warn (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:6799:17)
at patch (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:3951:21)
at mountChildren (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4127:13)
at mountElement (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4037:17)
at processElement (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4019:13)
at patch (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:3939:21)
at ReactiveEffect.componentUpdateFn [as fn] (node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:4476:21)
Taking into account the logs, it seems like jest does not detect very well the scss part. It is related to how jest is configurated?
Here the jest.config:
module.exports = {
transform: {
'^.+\\.(ts)$': 'ts-jest',
'^.+\\.vue$': 'vue3-jest',
'\\.[jt]sx?$': 'babel-jest',
'.+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2|webp)$':
'jest-transform-stub',
},
transformIgnorePatterns: ['/node_modules/(?!vue-awesome)'],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'^#tests/(.*)$': '<rootDir>/tests/$1',
},
moduleFileExtensions: ['js', 'ts', 'vue', 'json'],
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue',
],
testEnvironment: 'jsdom',
setupFiles: ['<rootDir>/tests/setup.js'],
testPathIgnorePatterns: ['tests'],
globalSetup: '<rootDir>/tests/global-setup.js',
}
Thanks!