开玩笑，不适用于样式组件，得到“TypeError：无法读取未定义的属性‘div’”

Question

似乎无法用 Jest 进行测试，因为我正在使用样式组件。有人找到解决这个问题的方法吗？

\n\n

我将我的“StyledComponents.js”组件放在一个单独的文件中，并根据需要将它们导入到我的页面中..ala。

\n\n

从“StyledComponents”导入{页脚、页眉、LeftNav}；

\n\n

 PASS  src/app/components/Products/__tests__/Avatar.test.js\n FAIL  src/app/components/Products/__tests__/product-snapshot-test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: Cannot read property \'div\' of undefined\n\n\n      at Object.<anonymous> (src/app/components/Products/styledComponents.js:9:148)\n      at Object.<anonymous> (src/app/components/Products/ProductsItem.js:3:41)\n      at Object.<anonymous> (src/app/components/Products/index.js:7:50)\n      at Object.<anonymous> (src/app/components/Products/__tests__/product-snapshot-test.js:5:14)\n

\n\n

包含来自 styled.js 文件（ala：styled-components）的组件的导入文件部分令人窒息。

\n\n

// @flow\nimport React from \'react\';\nimport {\n  Products,\n  ProductItem\n} from \'./styledComponents\';\n

\n\n

基本上，它说“样式”是未定义的。然而，在我的文件中，我有：

\n\n

import styled from \'styled-components\';\n\nexport const ProductContainer = styled.div`\n  border-radius: 5px;\n  overflow: hidden;\n`;\n\netc.... \n

\n\n

更新为包括 babelrc 和 package.json 文件

\n\n

巴贝尔库

\n\n

{\n  "presets": ["es2015", "react", "flow"],\n  "plugins": [\n    "transform-class-properties",\n    "transform-object-rest-spread",\n    "transform-decorators-legacy"\n  ],\n  "env": {\n    "development": {\n      "plugins": [\n        "transform-class-properties",\n        "transform-object-rest-spread",\n        "transform-decorators-legacy",\n        "react-hot-loader/babel"\n      ]\n    },\n    "test": {\n      "plugins": [\n        "transform-es2015-modules-commonjs"\n      ]\n    }\n  }\n}\n

\n\n

Package.json 文件

\n\n

{\n  "name": "whatever",\n  "version": "0.0.1",\n  "main": "server.js",\n  "license": "UNLICENSED",\n  "scripts": {\n    "start": "npm-run-all --parallel start:server start:app",\n    "start:app": "webpack-dev-server --progress",\n    "start:server": "nodemon -i \'webpack*.js\' -i \'src/app/**/*.js\' server.js ",\n    "test": "npm run test:app",\n    "test:app": "jest --coverage",\n    "build": "webpack -p --define process.env.NODE_ENV=\\"\'production\'\\"",\n    "lint": "eslint ./",\n    "flow": "flow"\n  },\n  "dependencies": {\n    "app-module-path": "^2.2.0",\n    "autoprefixer": "^7.1.2",\n    "babel-core": "^6.25.0",\n    "babel-loader": "^7.1.1",\n    "babel-plugin-transform-class-properties": "^6.24.1",\n    "babel-plugin-transform-decorators-legacy": "^1.3.4",\n    "babel-plugin-transform-object-rest-spread": "^6.23.0",\n    "babel-preset-es2015": "^6.24.1",\n    "babel-preset-flow": "^6.23.0",\n    "babel-preset-react": "^6.24.1",\n    "body-parser": "^1.17.2",\n    "copy-webpack-plugin": "^4.0.1",\n    "css-loader": "^0.28.4",\n    "express": "^4.15.3",\n    "extract-text-webpack-plugin": "^3.0.0",\n    "file-loader": "^0.11.2",\n    "html-webpack-plugin": "^2.29.0",\n    "immutability-helper": "^2.3.0",\n    "less": "^2.7.2",\n    "less-loader": "^4.0.5",\n    "postcss-loader": "^2.0.6",\n    "react": "^15.6.1",\n    "react-addons-shallow-compare": "^15.6.0",\n    "react-bootstrap": "^0.31.1",\n    "react-dom": "^15.6.1",\n    "react-loader": "^2.4.2",\n    "react-redux": "^5.0.5",\n    "react-router-dom": "^4.1.2",\n    "react-transition-group": "^2.0.2",\n    "redux": "^3.7.1",\n    "redux-thunk": "^2.2.0",\n    "style-loader": "^0.18.2",\n    "styled-components": "^2.1.1",\n    "webpack": "^3.3.0"\n  },\n  "devDependencies": {\n    "babel-eslint": "^7.1.1",\n    "babel-jest": "^20.0.3",\n    "eslint": "^4.2.0",\n    "eslint-plugin-babel": "^4.1.1",\n    "eslint-plugin-flowtype": "^2.35.0",\n    "eslint-plugin-jest": "^20.0.3",\n    "eslint-plugin-react": "^7.1.0",\n    "flow-bin": "^0.50.0",\n    "identity-obj-proxy": "^3.0.0",\n    "jest": "^20.0.4",\n    "nock": "^9.0.14",\n    "nodemon": "^1.11.0",\n    "npm-run-all": "^4.0.2",\n    "react-hot-loader": "^3.0.0-beta.7",\n    "react-test-renderer": "^15.6.1",\n    "redux-mock-store": "^1.2.3",\n    "webpack-dev-middleware": "^1.11.0",\n    "webpack-dev-server": "^2.5.1"\n  },\n  "jest": {\n    "collectCoverageFrom": [\n      "src/app/**/*.js"\n    ],\n    "coverageThreshold": {\n      "global": {\n        "statements": 60,\n        "branches": 60,\n        "functions": 80,\n        "lines": 70\n      }\n    },\n    "moduleFileExtensions": [\n      "js"\n    ],\n    "moduleDirectories": ["node_modules", "src"],\n    "moduleNameMapper": {\n      "\\\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/app/__mocks__/fileMock.js",\n      "\\\\.(css|less)$": "identity-obj-proxy",\n      "components(.*)$": "<rootDir>/src/app/components$1",\n      "constants(.*)$": "<rootDir>/src/app/constants$1",\n      "utils(.*)$": "<rootDir>/src/app/utils$1"\n    }\n  }\n}\n

\n