css - JEST 一直尝试解析 css 模块，即使我有模拟文件和 identity-obj-proxy

Question

大家好，我遇到这个问题是因为我在运行 npm test 时试图让 JEST 跳过我的 css 文件。出于某种原因，无论我做什么，它都会不断尝试加载这些文件。我尝试关注 https://facebook.github.io/jest/docs/en/webpack.html我遵循了这两种解决方案。

这是我得到的错误

 FAIL  src\common\Table.test.js
  ? Test suite failed to run

    C:\Users\Administrator\Documents\late\ui\src\common\css\common.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,
global,jest){html{

                 ^

    SyntaxError: Unexpected token {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/b
uild/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/components/Login/Login.js:4:1)
      at Object.<anonymous> (src/common/CommunicationManager.js:5:14)

包.json

//package.json
{
  "name": "react-redux-pattern-coolshare",
  "version": "0.0.1",
  "description": "Test",
  "scripts": {
    "start": "node server.js",
    "lint": "eslint src",
    "test": "jest",
    "test:watch": "npm test -- --watch"
  },
  "private": false,
  "keywords": [
    "react",
    "reactjs",
    "redux",
    "starter",
    "kit",
    "mapbox",
    "googlemap",
    "webpack"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-eslint": "^4.1.3",
    "babel-jest": "^20.0.3",
    "babel-loader": "^6.0.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.0.15",
    "enzyme": "^2.9.1",
    "eslint": "^1.10.3",
    "eslint-plugin-react": "^3.6.2",
    "express": "^4.13.4",
    "history": "^2.0.0",
    "identity-obj-proxy": "^3.0.0",
    "image-webpack-loader": "^3.3.1",
    "jest": {
      "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"
     }
    },
    "react-addons-test-utils": "^15.6.0",
    "react-hot-loader": "^1.3.0",
    "react-router": "^3.0.2",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0"
  },
  "dependencies": {
    "axios": "^0.16.1",
    "chai": "^4.0.2",
    "css-loader": "^0.28.0",
    "d3": "^4.9.1",
    "google-map-react": "^0.24.0",
    "html-webpack-plugin": "^2.28.0",
    "infinite-tree": "^1.10.0",
    "jest-cli": "^20.0.4",
    "jquery": "^3.2.1",
    "mapbox-gl": "^0.36.0",
    "paradux": "^1.2.1",
    "postcss-loader": "^1.3.3",
    "prop-types": "^15.5.8",
    "react": "^15.6.1",
    "react-bootstrap": "^0.30.8",
    "react-bootstrap-table": "^4.0.3",
    "react-confirm-alert": "^1.0.7",
    "react-data-grid": "^2.0.30",
    "react-data-grid-addons": "^2.0.30",
    "react-dom": "^15.5.4",
    "react-fontawesome": "^1.6.1",
    "react-image-gallery": "^0.7.15",
    "react-infinite-tree": "^0.6.1",
    "react-mapbox-gl": "^1.9.1",
    "react-pure-render": "^1.0.2",
    "react-redux": "^5.0.3",
    "react-tabs": "^0.8.2",
    "react-toggle-display": "^2.1.1",
    "react-tooltip": "^3.3.0",
    "react-youtube": "^7.4.0",
    "reduce-object": "^0.1.3",
    "redux": "^3.6.0",
    "redux-form": "^7.0.3",
    "reflexbox": "^3.0.0-0",
    "style-loader": "^0.16.1",
    "webpack-isomorphic-tools": "^3.0.2"
  },
  "main": "bundle.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/coolshare/ReactReduxPattern.git"
  },
  "bugs": {
    "url": "https://github.com/coolshare/ReactReduxPattern/issues"
  },
  "homepage": "https://github.com/coolshare/ReactReduxPattern#readme"
}

不确定为什么它仍在尝试加载 css 文件。谁能给我任何帮助？我也尝试过模拟文件，但它不起作用

Answer 1

您已将 jest 部分放在 devDependencies 下，它应该位于 package.json 的根目录下。

//package.json
{
  "name": "react-redux-pattern-coolshare",
  "version": "0.0.1",
  "description": "Test",
  "scripts": {
    "start": "node server.js",
    "lint": "eslint src",
    "test": "jest",
    "test:watch": "npm test -- --watch"
  },
  "private": false,
  "keywords": [
    "react",
    "reactjs",
    "redux",
    "starter",
    "kit",
    "mapbox",
    "googlemap",
    "webpack"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-eslint": "^4.1.3",
    "babel-jest": "^20.0.3",
    "babel-loader": "^6.0.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.0.15",
    "enzyme": "^2.9.1",
    "eslint": "^1.10.3",
    "eslint-plugin-react": "^3.6.2",
    "express": "^4.13.4",
    "history": "^2.0.0",
    "identity-obj-proxy": "^3.0.0",
    "image-webpack-loader": "^3.3.1",
    "react-addons-test-utils": "^15.6.0",
    "react-hot-loader": "^1.3.0",
    "react-router": "^3.0.2",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0"
  },
  "dependencies": {
    "axios": "^0.16.1",
    "chai": "^4.0.2",
    "css-loader": "^0.28.0",
    "d3": "^4.9.1",
    "google-map-react": "^0.24.0",
    "html-webpack-plugin": "^2.28.0",
    "infinite-tree": "^1.10.0",
    "jest-cli": "^20.0.4",
    "jquery": "^3.2.1",
    "mapbox-gl": "^0.36.0",
    "paradux": "^1.2.1",
    "postcss-loader": "^1.3.3",
    "prop-types": "^15.5.8",
    "react": "^15.6.1",
    "react-bootstrap": "^0.30.8",
    "react-bootstrap-table": "^4.0.3",
    "react-confirm-alert": "^1.0.7",
    "react-data-grid": "^2.0.30",
    "react-data-grid-addons": "^2.0.30",
    "react-dom": "^15.5.4",
    "react-fontawesome": "^1.6.1",
    "react-image-gallery": "^0.7.15",
    "react-infinite-tree": "^0.6.1",
    "react-mapbox-gl": "^1.9.1",
    "react-pure-render": "^1.0.2",
    "react-redux": "^5.0.3",
    "react-tabs": "^0.8.2",
    "react-toggle-display": "^2.1.1",
    "react-tooltip": "^3.3.0",
    "react-youtube": "^7.4.0",
    "reduce-object": "^0.1.3",
    "redux": "^3.6.0",
    "redux-form": "^7.0.3",
    "reflexbox": "^3.0.0-0",
    "style-loader": "^0.16.1",
    "webpack-isomorphic-tools": "^3.0.2"
  },
  "jest": {
      "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"
     }
    },
  "main": "bundle.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/coolshare/ReactReduxPattern.git"
  },
  "bugs": {
    "url": "https://github.com/coolshare/ReactReduxPattern/issues"
  },
  "homepage": "https://github.com/coolshare/ReactReduxPattern#readme"
}