javascript - Jest 快照 @import CSS 失败

Question

我无法在当前的jest 设置中使用@import

npm run test

> test5@0.0.1 test /var/www/test5
> jest

 FAIL  src/components/Menu/index.spec.js
  ● Test suite failed to run

    /var/www/test5/src/components/Menu/style.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "../shared/vars.css";
                                                                                             ^

    SyntaxError: Invalid or unexpected token

       7 | 
       8 | //Styles
    >  9 | import style from './style.css';
      10 | 
      11 | class Menu extends React.Component {
      12 |  constructor (props){

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.<anonymous> (src/components/Menu/index.js:9:14)
      at Object.<anonymous> (src/components/Menu/index.spec.js:3:14)

样式.css

@import "../shared/vars.css";

.menu {
  background: #322e31;
  color: $wtext;
  width: 80vw;
  max-width: 400px;
  position: fixed;
  right: -80vw;
  top: 0;
  height: 100vh;
  z-index: 3;

  h2,h3 {
    font-size: 16px;
    display: inline-block;
  }
}

package.json

  "jest": {
    "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)$": "identity-obj-proxy"
      }
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  }

Answer 1

对我有用的配置是:

"moduleNameMapper": {
  "^[./a-zA-Z0-9$-]+\\.png$": "<rootDir>/src/public/__mocks__/ImageAndStyleDummy.js",
  "^[./a-zA-Z0-9$-]+\\.css$": "<rootDir>/src/public/__mocks__/ImageAndStyleDummy.js"
}   

您需要更改路径 <rootDir>/src/public/__mocks__/ImageAndStyleDummy.js到你自己的模拟。您甚至可以使用 fileMock.js根据实现情况，只需添加 css扩展到已经存在的正则表达式并删除专用于此扩展的行。或者创建一个新的专用于 css遵循相同的模式。