CSS modules ($style) in next branch

[lmiller1990]

Ref: vuejs/test-utils#179

[petervmeijgaard]

Hi @lmiller1990, do you have an update on this ticket? It's been a while since you've created this issue, but it still hasn't been fixed IIRC.
Is there any way I can help you speed up the process?

I really need this feature to properly test my Vue 3 components, so a follow up would be nice 🙂

[lmiller1990]

If you want to try and implement it, I can help review and get it merged. I did not look into this yet. I don't think it will be too difficult, the SFC compiler will do most of the work. It also has typings so it's pretty easy to figure out how it works.

[cowills]

@petervmeijgaard @lmiller1990 have either of you started working on this? i'm happy to spend a bit of time trying to solve it but don't want to duplicate efforts

[lmiller1990]

I have not started working on this, you are more than welcome too. I'd say you will need to look at the sfc-compiler code in vue core and see how it handles injecting css variables. Ping me if you need some help!

[hellboywar]

@lmiller1990 There is an issue - to compile css modules with @vue/compiler-sfc we have to use async function compileStyleAsync, sync function is not an option.

But jest latest stable version as of right now is 26.6.3, its transformer doen't support async behavior. We have to wait for jest v27 - they added processAsync not so long ago. Anyway I was not able to make it work, can't figure out how to make it call the async branch - some help required here.

[cowills]

import { shallowMount, mount } from '@vue/test-utils';

const styleHandler = {get: (target, prop) => prop }
const styleProxy = new Proxy({}, styleHandler);


const shallowMountWithStyle = (comp, options = {}) => {
  let opts = options;
  opts.global = options.global || {};
  opts.global.mocks = options.global.mocks || {};
  opts.global.mocks.$style = styleProxy;
  return shallowMount(comp, {
    ...opts,
  });
}

const mountWithStyle = (comp, options = {}) => {

  let opts = options;
  opts.global = options.global || {};
  opts.global.mocks = options.global.mocks || {};
  opts.global.mocks.$style = styleProxy;
  return mount(comp, {
    ...opts,
  });
}

export {
  shallowMountWithStyle as shallowMount,
  mountWithStyle as mount,
}

To work around this in my codebase I made a wrapper for mount/shallowMount that injects a $style variable which simply returns whatever class is invoked. i.e, $style['something-whatever'] returns 'something-whatever' in the testing environment, which allowed us to continue our vue 3 migration without unit testing being blocked. If your unit tests/codebase does not depend on the CSS module class names being processed/hashed then this workaround might let you bypass this issue.

[jolting]

I think there should be some way of automatically loading a style tag into JSDOM when mounting. This would be consistent with how Vue files are used with the vue-loader.

[lmiller1990]

Ok, I can have a look. It looks like Jest 27 is available under the next tag on npm, so if we need Jest 27, we can just ask people to upgrade (Jest usually doesn't have too many breaking changes now days, it should be fairly easy).

Can you share a test you'd like to write with this feature? We could use that as the test case when we work though implementing this. I have not used the $style property with CSS modules before, I can't think of a good test example off the top of my head.

[YutamaKotaro]

Sorry for my joining in the middle of conversation. I really want to resolve this issue..!!
I created PR #345
What do you think about this implementation and test ?

I added test cases draft and code, all test works well.

If there is something wrong, please let me know 🙇🏻 . I'll fix it soon !!

[lmiller1990]

Wow, awesome. Big release coming with this PR!

[lmiller1990]

I will release this in a day or two. thanks!

[lmiller1990]

It's out in 5.0.0-alpha.10.