似乎无法使用Jest进行测试，因为我使用的是样式化组件。有人找到解决方案吗？
我正在使用我的＆＃34; StyledComponents.js＆＃34;单独文件中的组件，并根据需要将它们导入我的页面.ala。
从＆＃34; StyledComponents＆＃34;中导出{Footer，Header，LeftNav};
PASS src/app/components/Products/__tests__/Avatar.test.js
FAIL src/app/components/Products/__tests__/product-snapshot-test.js
● Test suite failed to run
TypeError: Cannot read property 'div' of undefined
at Object.<anonymous> (src/app/components/Products/styledComponents.js:9:148)
at Object.<anonymous> (src/app/components/Products/ProductsItem.js:3:41)
at Object.<anonymous> (src/app/components/Products/index.js:7:50)
at Object.<anonymous> (src/app/components/Products/__tests__/product-snapshot-test.js:5:14)
导入文件中包含来自styled.js文件（ala：styled-components）的组件的部分令人窒息。
// @flow
import React from 'react';
import {
Products,
ProductItem
} from './styledComponents';
基本上，它是说＆＃34;样式＆＃34;未定义。然而，在我的文件中，我有：
import styled from 'styled-components';
export const ProductContainer = styled.div`
border-radius: 5px;
overflow: hidden;
`;
etc....
更新包括babelrc＆amp; package.json文件
babelrc
{
"presets": ["es2015", "react", "flow"],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-decorators-legacy"
],
"env": {
"development": {
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-decorators-legacy",
"react-hot-loader/babel"
]
},
"test": {
"plugins": [
"transform-es2015-modules-commonjs"
]
}
}
}
Package.json文件
{
"name": "whatever",
"version": "0.0.1",
"main": "server.js",
"license": "UNLICENSED",
"scripts": {
"start": "npm-run-all --parallel start:server start:app",
"start:app": "webpack-dev-server --progress",
"start:server": "nodemon -i 'webpack*.js' -i 'src/app/**/*.js' server.js ",
"test": "npm run test:app",
"test:app": "jest --coverage",
"build": "webpack -p --define process.env.NODE_ENV=\"'production'\"",
"lint": "eslint ./",
"flow": "flow"
},
"dependencies": {
"app-module-path": "^2.2.0",
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.17.2",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"immutability-helper": "^2.3.0",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-loader": "^2.0.6",
"react": "^15.6.1",
"react-addons-shallow-compare": "^15.6.0",
"react-bootstrap": "^0.31.1",
"react-dom": "^15.6.1",
"react-loader": "^2.4.2",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"react-transition-group": "^2.0.2",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0",
"style-loader": "^0.18.2",
"styled-components": "^2.1.1",
"webpack": "^3.3.0"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "^20.0.3",
"eslint": "^4.2.0",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-flowtype": "^2.35.0",
"eslint-plugin-jest": "^20.0.3",
"eslint-plugin-react": "^7.1.0",
"flow-bin": "^0.50.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.4",
"nock": "^9.0.14",
"nodemon": "^1.11.0",
"npm-run-all": "^4.0.2",
"react-hot-loader": "^3.0.0-beta.7",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1"
},
"jest": {
"collectCoverageFrom": [
"src/app/**/*.js"
],
"coverageThreshold": {
"global": {
"statements": 60,
"branches": 60,
"functions": 80,
"lines": 70
}
},
"moduleFileExtensions": [
"js"
],
"moduleDirectories": ["node_modules", "src"],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/app/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy",
"components(.*)$": "<rootDir>/src/app/components$1",
"constants(.*)$": "<rootDir>/src/app/constants$1",
"utils(.*)$": "<rootDir>/src/app/utils$1"
}
}
}