React Component 的开玩笑测试用例失败

Question

当我尝试模拟我的 React 组件时，出现以下错误。

？测试套件未能运行

C:\UBS\Dev\workspace\topcat-ui\node_modules\antd\lib\style\index.css:9
html {
     ^
SyntaxError: Unexpected token {

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
  at Object.<anonymous> (node_modules/antd/lib/pagination/style/css.js:3:1)
  at Object.<anonymous> (src/main/webapp/js/pages/dashboard/Dashboard.jsx:1:176)

这就是我的 package.json 的样子。有人能给我指出正确的方向吗？

{
  "name": "dashboard",
  "version": "1.0.0",
  "description": "Realtime dashboard",
  "main": "index.html",
  "scripts": {
    "build": "node_modules\.bin\webpack",
    "dev": "node_modules\.bin\webpack --watch",
    "test": "jest",
    "test-coverage": "jest --coverage"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-jest": "^20.0.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-import": "^1.2.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "enzyme": "^2.9.1",
    "eslint": "^4.1.1",
    "eslint-loader": "^1.8.0",
    "eslint-plugin-react": "^7.1.0",
    "html-webpack-plugin": "^2.28.0",
    "jest": "^20.0.4",
    "moment": "^2.18.1",
    "path": "^0.12.7",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-test-renderer": "^15.6.1",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "antd": "^2.11.0",
    "axios": "^0.16.2",
    "babel-polyfill": "^6.23.0",
    "react": "^15.5.4",
    "react-dom": "^15.6.1",
    "react-file-download": "^0.3.4",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "url-pattern": "^1.0.3"
  }
}

这是我的测试用例的样子

import React from 'react';
import {mount} from 'enzyme';
import Dashboard from '../../../main/webapp/js/pages/dashboard/Dashboard';

function setup() {
    const Dashboard = mount(<Dashboard />);
    return {
        Dashboard
    }
}

describe('Components', () => {
    describe('Dashboard', () => {
        it('should render itself', () => {
            const { Dashboard } = setup();
            expect(Dashboard.find('table').length).toBe(1);
        });
    });
});

Answer 1

可能是加载样式表失败了。您必须提供有关组件和模拟过程的更多信息。它可能正在将 .css 文件加载为 .js 文件。

Answer 2

我假设你正在使用 webpack？查看 docs 中的这篇注释。您可以在您的 jest 配置中使用 moduleNameMapper 或 transform 选项来 mock/ignore 您的 css 文件。

{
 "jest": {
    "moduleNameMapper": {
      "\.(css|less)$": "identity-obj-proxy"
    },
    "transform": {
      "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"
    }
  }
}


// fileTransformer.js
const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

React Component 的开玩笑测试用例失败

jest test case failing for React Component

reactjs

jestjs

react-redux

babel-jest