search

Connormiha / jest-css-modules-transform

Preprocessor css modules for Jest test framework. Generates correct css object. Supports css, sass, stylus, less.
61 stars 18 forks source link

jest-css-modules-transform-config.js not read #41

Open thplat opened 3 years ago

thplat commented 3 years ago

I have created the jest-css-modules-transform-config.js in the root of my package, however it does not seem to be honored.

Contents of the config file:

module.exports = {
    injectIntoDOM: true,
    prepend: [
        './src/scss/vue-ui.scss',
    ],
};

Example Test:

import { shallowMount, mount } from '@vue/test-utils'
import Select from '@/components/Forms/Select.vue'
import colors from '@/scss/_base_js.scss';

describe('Select.vue', () => {

  const wrapper = mount(Select, {
    propsData: {
      options: ['Option A', 'Option B'],
      value: 'Option A'
    }
  });

  it('has the brand brand color', () => {
    console.log(getComputedStyle(wrapper.element));
    //expect(wrapper.element).toHaveStyle({background: colors.brandColor});
  });
})

The computed styles are empty and the css does not seem to be injected into the DOM. Am I doing something wrong here? I also tried to manually set the path via the JEST_CSS_MODULES_TRANSFORM_CONFIG env variable but it seems to have no effect either.

Connormiha commented 2 years ago

@thplat can you show the console of document.body.innerHTML before expect call?

trishinanton commented 1 year ago

the same problem, here is the screen, you can see that the head is empty

  <html>
      <head />
      <body>
        <div>
          <button
            class="button"
          >
            text
          </button>
        </div>
      </body>
    </html>

Contents of the config file:

import path from 'path';

module.exports = {
  injectIntoDOM: true,
  prepend: [path.resolve(process.cwd(), 'src/core/sass')]
};