当我尝试模拟我的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);
});
});
});
答案 0 :(得分:1)
我假设您使用的是webpack?查看docs中的此注释。您可以使用jest配置中的moduleNameMapper
或transform
选项来模拟/忽略您的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)) + ';';
},
};
答案 1 :(得分:0)
加载样式表可能有些失败。您必须提供有关组件和模拟过程的更多信息。它可能将.css文件加载为.js文件。