CSS Modules not supported about jest-vue-preprocessor HOT 9 CLOSED

Hi,

I'm experimenting with Jest and Vue as well. In React+CSS Modules+Jest testing I used identity-obj-proxy to mock CSS modules classes with success.

In a test project I've setup a working test as follow:

Root/index.vue

<template>
    <div :class="$style.root">
        Hello {{ message }}
    </div>
</template>

<script>

export default {
    data() {
        return {
            message: 'World'
        };
    },
    name: 'Root'
};

</script>

<style module>
.root {
    font-size: 12px;
}
</style>

Root/index.test.js

import Vue from 'vue';
import idObj from 'identity-obj-proxy';
import Root from './index';

/* eslint-env jest */
describe('<Root>', () => {

    let Constructor;
    let vm;

    beforeEach(() => {
        Constructor = Vue.extend(Root);

        Constructor.prototype.$style = idObj; // <-- Mocking $style

        vm = new Constructor().$mount();
    });

    it('should render a <div> tag', () => {
        expect(vm.$el.tagName).toBe('DIV');
    });

    it('should contain "Hello World"', () => {
        expect(vm.$el.textContent.trim()).toBe('Hello World');
    });

});

Relevant Jest config:

"moduleFileExtensions": ["js", "json", "vue"],
    "transform": {
        "^.+\\.js$": "babel-jest",
        ".*\\.(vue)$": "jest-vue-preprocessor"
},

Hope it helps

from jest-vue-preprocessor.

I ended up just creating a mixin that I load into my tests. It just creates an empty object on every component's $style property. I'd still like Vue to create a synchronous converter that isn't tied to webpack or browserify that can be used instead of these preprocessors.

The Mixin

export const CssModuleTestHelperMixin = {
	install (Vue, options) {
		Vue.mixin({
			created () {
				this.$style = {}
			}
		})
	}
}

In My Tests

import Vue from 'vue'
import { CssModuleTestHelperMixin } from '../utils/test-helper.js'
import { mount } from 'avoriaz'
import Header from './header.vue'

// shims $style so that jest-preprocessor doesn't need to compile styles
Vue.use(CssModuleTestHelperMixin)

test('test header', () => {
	let vm = mount(Header)
})

from jest-vue-preprocessor.

I believe .vue files need webpack or some other library to be processed and usable on other tools, but maybe I'm not getting the point.

Using a mixin is a good idea though. You could provide identity-obj-proxy to this.$style instead of an empty object if you'd need to check which classes gets applied

from jest-vue-preprocessor.

I also checked out avoriaz, didn't know that project! Cool! 😄

from jest-vue-preprocessor.

@dwightjack Yes, I know that .vue files need webpack or browserify. That's my point. It'd be nice if the Vue devs would create a standalone tool to process the .vue files while still getting all the features such as CSS Modules, etc.

Also, YES, Avoriaz is pretty sweet.

from jest-vue-preprocessor.

Ok I got it. I believe it's a way to not force developers in yet a different toolchain. But i get your point.

from jest-vue-preprocessor.

Right, but what I was thinking is that vue-loader and vueify would just wrap it

from jest-vue-preprocessor.

@dwightjack nice solution, thank you!

from jest-vue-preprocessor.

Need support at the level of the transformer, the same as it is implemented at the level of the vue-loader. Otherwise, everything is bad. It's bad when module names are used, it's bad when class names are used as variables inside a component, it's always bad if you use cssModule and Jest.

from jest-vue-preprocessor.