Closed
Description
This issue might be related to vue-jest but I'll open it here because I got the error from the test utils and I'm 100% sure of the what is responsible from it. Please feel free to point me to the correct repo if this is not the one.
Description
I get the error below when I use a PostCSS mixin in a CSS file. I assume it expects a semicolon where I use the mixin while parsing the CSS file but it cannot find it and throws this error.
FAIL src/components/HellowWorld.test.js
● Test suite failed to run
undefined:12:1: missing '}'
at error (node_modules/css/lib/parse/index.js:62:15)
at declarations (node_modules/css/lib/parse/index.js:260:26)
at rule (node_modules/css/lib/parse/index.js:561:21)
at rules (node_modules/css/lib/parse/index.js:118:70)
at stylesheet (node_modules/css/lib/parse/index.js:81:21)
at Object.module.exports [as parse] (node_modules/css/lib/parse/index.js:565:20)
at Function.extractClasses (node_modules/extract-from-css/lib/index.js:14:23)
at extractClassMap (node_modules/@vue/vue3-jest/lib/process-style.js:24:31)
at processStyle (node_modules/@vue/vue3-jest/lib/process-style.js:123:25)
at node_modules/@vue/vue3-jest/lib/process.js:149:13Reproduction link: https://github.com/sevilyilmaz/vue-3-setup-css-modules-mixin
Setup
HelloWorld.vue
<script>
import { ref, computed, useCssModule } from 'vue';
export default {
props: {
msg: String,
},
setup(props) {
const styles = useCssModule();
const rootClasses = computed(() => ({
[styles.root]: true,
}));
return { rootClasses };
},
};
</script>
<template>
<div :class="rootClasses">{{ msg }}</div>
</template>
<style src="./HelloWorld.module.css" module />HelloWorld.module.css
:root {
--theme_color_background_base: #f00;
}
@define-mixin hover {
outline: none;
box-shadow: 0 0 0 2px var(--theme_color_background_base);
}
.root {
color: #42b983;
}
.root:hover {
@mixin hover;
}HelloWorld.test.js
import { mount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';
describe('HelloWorld', () => {
it('renders with correct classes', () => {
const wrapper = mount(HelloWorld);
expect(wrapper.classes()).toEqual(['root']);
});
});jest.config.js
module.exports = {
collectCoverageFrom: ['src/**/*.{js,vue}'],
coverageReporters: ['text', 'cobertura', 'json', 'lcov', 'clover'],
coverageProvider: 'v8',
errorOnDeprecated: true,
moduleFileExtensions: ['js', 'json', 'vue'],
notify: false,
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
testEnvironment: 'jest-environment-jsdom',
testPathIgnorePatterns: ['<rootDir>/cypress/'],
testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(test).[jt]s?(x)'],
testURL: 'http://localhost',
transform: {
'^.+\\.vue$': '@vue/vue3-jest',
'^.+\\.js$': 'babel-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
require.resolve('jest-transform-stub'),
},
transformIgnorePatterns: ['/node_modules/(?!some-internal-modules).+\\.js$'],
};Metadata
Metadata
Assignees
Labels
No labels