4

似乎无法使用 Jest 进行测试，因为我使用的是样式组件。有人找到解决方案吗？

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

从“StyledComponents”导入{页脚，页眉，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';

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

import styled from 'styled-components';

export const ProductContainer = styled.div`
  border-radius: 5px;
  overflow: hidden;
`;

etc....

更新包括 babelrc 和 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"
      ]
    }
  }
}

包.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"
    }
  }
}
4

0 回答 0