The recommended settings cannot fix the problem when using storybook

When using storybook,

  transform: {
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    // ... snip ...
  },

cannot fix the problem (Syntax Error: Invalid or unexpected token), but,

  moduleNameMapper: {
    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },

can fix the problem. I’m not sure the reason.

[jonasohrn]

The same line in jest config as above fixed my problem which is unrelated to storybook: moduleNameMapper: { ‘^.+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$’: ‘jest-transform-stub’, }, This was for the general problem that jest does not handle import of external css and I guess we need this stub both for local css (using transform config) but also add it to moduleNameMapper to stub transitive source dependencies imported css: myTest -> myComponent.vue -> import otherLibraryComponent.vue -> “import some.css”

[eddyerburgh]

Thanks for the reproduction 😄

Jest doesn’t apply transforms to node_modules by default. You can solve this by changing the transformIgnorePatterns:

{
  jest: {
    // ..
    "transformIgnorePatterns": ["/node_modules/(?!your-module-name)"]
  }
}

Or adding to moduleNameMapper as you have suggested:

{
  jest: {
    "moduleNameMapper": {
      '^.+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    },
  }
}