Unable to mock $style on an Options API based component using CSS Modules when using vue-jest (@vue/vue3-jest@29.2.2) with experimentalCSSCompile: false.
A __cssModules object gets added to the component instance with an internal $style property as an empty object, however, the useCssModule API (and the resulting __cssModules object) should only apply when using the Composition API.
When the __cssModules object is present, vm lookups for $style resolve to __cssModules instead of the $style mock object present in the component's vm.
failing test:
import { mount } from '@vue/test-utils';
import MyFoo from '../src/foo.vue';
describe('MyFoo', () => {
test('applies the proper module class', () => {
const wrapper = mount(MyFoo, {
global: {
mocks: {
$style: {
'my-foo': 'my-foo',
},
bar: {
fb: 'FB',
},
},
},
});
expect(wrapper.vm.bar.fb).toBe('FB'); // pass
expect(wrapper.vm.$style['my-foo']).toBe('my-foo'); // fail, undefined, tries to find 'my-foo' in MyFoo.__cssModules.$style
expect(wrapper.classes()).toContain('my-foo'); // fail
});
});
Unable to mock
$style
on an Options API based component using CSS Modules when using vue-jest (@vue/vue3-jest@29.2.2) withexperimentalCSSCompile: false
.A
__cssModules
object gets added to the component instance with an internal$style
property as an empty object, however, theuseCssModule
API (and the resulting__cssModules
object) should only apply when using the Composition API.When the
__cssModules
object is present,vm
lookups for$style
resolve to__cssModules
instead of the$style
mock object present in the component'svm
.failing test:
foo.vue:
foo.scss:
PR #345 added support for CSS Modules in vue-jest based on Issue #268.
Perhaps adding a check for
scriptSetupResult
to the code modified in #345 ingenerate-code.js
like:could allow the
useCssModule
API to only apply when using the Composition API?