Jest css-modules SyntaxError: Unexpected token答案

【问题标题】：Jest css-modules SyntaxError: Unexpected tokenJest css-modules SyntaxError: Unexpected token
【发布时间】：2018-02-21 23:13:30
【问题描述】：

在按照他们的documentation 操作后，我已经设置了我的笑话以允许静态文件，但我仍然收到以下错误。

如何才能传递并创建快照。

终端错误

FAIL  src/components/Splash/Splash.test.js
  ● Test suite failed to run

    /var/www/com/src/components/shared/logo/_Logo.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.logo {
                                                                                             ^

    SyntaxError: Unexpected token .

      3 | 
      4 | 
    > 5 | import logo from './_Logo.css';
      6 | import * as font from '../font/fontello.css';

Splash.test.js

import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import Splash from './Splash';

it('Splash page is rendered', () => {
    const result = shallow(
        <Splash />,
    );

    expect(shallowToJson(result)).toMatchSnapshot();
});

笑话配置

  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
    "moduleFileExtensions": [
      "js"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/app/"
    ],
    "moduleNameMapper": {
      "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)$": "identity-obj-proxy"
      }
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  }

【问题讨论】：

似乎有一个小错误：moduleNameMapper: {moduleNameMapper{}} 应该只是moduleNameMapper:{}，也可能与--no-cache 开玩笑可能会有所帮助
请将其添加为答案，andreas，确定它不是超级有用，而是定制的，但它可能会帮助其他人不要那么愚蠢：D

标签： javascript reactjs jestjs css-modules

【解决方案1】：

有个小错误：moduleNameMapper: {moduleNameMapper{}} 应该只是moduleNameMapper:{}

"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)$": "identity-obj-proxy"
}

【讨论】：

对我来说，安装 identity-obj-proxy 和 "\\.(css)$": "jest-css-modules" 有效

【解决方案2】：

从 2018 年 2 月开始使用 create-react-app 的人可能会工作。我部分遵循了文档jest webpack 使其工作。

还发现 moduleNameMapper 不能在 package.json 中被覆盖，但在 jest.config.js 中它可以解决问题。不幸的是，我还没有找到任何关于它为什么这样做的文档，但这是我的答案。这是我的 jest.config.js：

module.exports = {
...,
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(scss|sass|css)$": "identity-obj-proxy"
  }
}

它很好地跳过了scss文件和@import。

我添加到 devDependencies identity-obj-proxy

【讨论】：