Vue-jest: Importing a CSS file in a component throws an error

[darthmeme]

I scaffolded out a @vue/cli project with Jest included. Then installed Bootstrap, and included the CSS file into the HelloWorld.vue component.

When running yarn unit:test, I get the following error:

Jest config (in package.json) includes:

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

Repo: https://github.com/darthmeme/vue-jest-import-css

[cp3r]

Jest doesn't apply transforms to node_modules by default. You can solve this by using moduleNameMapper in your jest config file:

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

From jest-transform-stub FAQ

[darthmeme]

@cp3r - hey, thanks for the reply! I recently found that out, but forgot about this issue. Closing.