Question

我试图理解为什么我的测试在使用实质性ui组件时失败了。我的摩卡测试设置似乎排除了节点模块，并且看来我有一个组件在运行测试时尝试引入material-ui组件。有趣的是，我有.skip属于该组件的单元测试，但是mocha无论如何都会加载规范。看来错误可能是babel的问题，但我对如何使用材料ui运行单元测试感到困惑。有什么建议吗？

setupTest.js

import { expect } from "chai";
import sinon from "sinon";
import fs from "fs";
import path from "path";
import register from "babel-core/register";
import enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import getMuiTheme from "material-ui/styles/getMuiTheme";

// test setup with JSDOM
const { JSDOM } = require("jsdom");
const jsdom = new JSDOM("<!doctype html><html><body></body></html>");
const { window } = jsdom;

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === "undefined")
    .reduce(
      (result, prop) => ({
        ...result,
        [prop]: Object.getOwnPropertyDescriptor(src, prop)
      }),
      {}
    );
  Object.defineProperties(target, props);
}

// Enzyme setup for React 16
enzyme.configure({ adapter: new Adapter() });

//setting globals to keep test clean
global.window = window;
global.document = window.document;
global.expect = expect;
global.sinon = sinon;
global.window.print = () => {};
global.window.open = () => {
  return { print: () => {} };
};
//need to pass context of material UI to test
global.muiTheme = getMuiTheme();

global.navigator = {
  userAgent: "node.js"
};
copyProps(window, global);

global.window.sessionStorage = {
  getItem: key => {
    if (key === "SSO") {
      return JSON.stringify(mockUser);
    }
    return global.window.sessionStorage.key;
  },
  setItem: (key, value) => {
    global.window.sessionStorage.key = value;
  }
};

// Ignore all node_modules except these, we need to transpile the Provider
const modulesToCompile = [].map(
  moduleName => new RegExp(`/node_modules/${moduleName}`)
);
const rcPath = path.join(__dirname, "..", ".babelrc");
const source = fs.readFileSync(rcPath).toString();
const config = JSON.parse(source);
config.ignore = function(filename) {
  if (!/\/node_modules\//.test(filename)) {
    return false;
  } else {
    const matches = modulesToCompile.filter(regex => regex.test(filename));
    const shouldIgnore = matches.length === 0;
    return shouldIgnore;
  }
};
register(config);

npm测试命令

"test": "nyc -x \"**/*.spec.js\"   -x \"**/setupTests.js\"   --reporter=html mocha --exit --require ./test/setupTests.js --require mock-local-storage --require ignore-styles --compilers js:babel-core/register  --reporter spec  \"./test/**/*.spec.js\""

示例规格

it.only("component should render without crashing", done => {
    const wrapper = shallow(
      <component
        user={store.users}
        branches={store.branches}
        assessment={store.assessment}
      />,
      {
        context: { muiTheme },
        childContextTypes: { muiTheme: PropTypes.object }
      }
    );

    wrapper.unmount();
    done();
  });

运行测试时出错

/path/to/app/node_modules/@material-ui/core/es/ListItemSecondaryAction/index.js:1
(function (exports, require, module, __filename, __dirname) { export { default } from './ListItemSecondaryAction';
                                                              ^^^^^^
SyntaxError: Unexpected token export

看来babel可能有问题，尽管我正在使用--compilers js:babel-core/register命令

有什么想法吗？

material-ui 1.4，mocha 4，反应16个单元测试失败

0 个答案: