Jest: Error when the project import css files

[dancespiele]

🐛 Bug Report

I follow the docs https://jestjs.io/docs/en/webpack to test projects that import css files however I get this error:

  ● Test suite failed to run

    /home/fjnavarro/Projects/ch-mono/client/node_modules/typeface-nunito/index.css:2
    @font-face {
    ^

    SyntaxError: Invalid or unexpected token

       9 |   jssPreset
      10 | } from '@material-ui/core/styles';
    > 11 | import 'typeface-nunito';
         | ^
      12 | import CssBaseline from '@material-ui/core/CssBaseline';
      13 | 
      14 | const theme = createMuiTheme({

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/withRoot.js:11:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.832s

jest.config.js:

module.exports = {
 moduleDirectories: ['node_modules'],
 moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node'],
 moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy'
  },
  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.js'],
  snapshotSerializers: ['enzyme-to-json/serializer']
}

To Reproduce

When I remove import 'typeface-nunito'; from the project it works
(see more https://www.npmjs.com/package/typeface-nunito)

Expected behavior

the test shouldn't fail when is testing projects which import css

Run npx envinfo --preset jest

System:
    OS: Linux 5.1 Solus 4.0
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 8.4.0 - ~/.nvm/versions/node/v8.4.0/bin/node
    npm: 5.3.0 - ~/.nvm/versions/node/v8.4.0/bin/npm
  npmPackages:
    jest: ^24.8.0 => 24.8.0

[thymikee]

Jest has no idea that typeface-nunito is non-JS (you import it without file extension). You need to make it explicit. Please extend your config to be something like this:

module.exports = {
 moduleDirectories: ['node_modules'],
 moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node'],
 moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+   'typeface-nunito': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.js'],
  snapshotSerializers: ['enzyme-to-json/serializer']
}

[2012shenghua]

i have the same problem.

[2012shenghua]

Could not locate module ./iconfont.css mapped as:
identity-obj-proxy.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/\.(css|less|sass|scss)$/": "identity-obj-proxy"
  },
  "resolver": undefined
}

  1 | import React from 'react';
  2 | import cs from 'classnames';
> 3 | import './iconfont.css';
    | ^
  4 |
  5 | export default (props) => <i {...props} className={cs('iconfont', [`icon-${props.type}`], 'm-r-5')} />;

[2012shenghua]

my jest configuration is:

module.exports = {
testRegex: '/test/.*.test.(js|ts)x?$',
moduleNameMapper: {
'\.(css|less|sass|scss)$': 'identity-obj-proxy',
'./iconfont.css': 'identity-obj-proxy',
},
collectCoverage: true,
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
setupFiles: ['/jest.setup.js'],
};