浅酶反应路由器 v4 摩卡测试不起作用

Question

我有这个简单的 React class 组件，我想对其进行单元测试。在我实现 react-router 并将组件包装在 withRouter 并开始使用 Link 之前，我很容易在 mocha 测试期间使用酶的浅层函数渲染组件。然而，情况已不再如此，因为 react-router 的组件取决于上下文。

组件：

const React = require('react');
const { Link, withRouter } = require('react-router-dom');
const createReactClass = require('create-react-class');
const { Divider, Drawer, IconButton, MenuList, MenuItem, ListItem, ListItemText } = require('@material-ui/core');
const { ChevronLeft } = require('@material-ui/icons');

const h = React.createElement;

const DrawerMenu = createReactClass({
  renderMenuItems: function ({ actConfig, pathname }) {
    const chapterList = actConfig.chapterList;
    return (chapterList || []).map(chapter => {
      const path = `/${chapter.idName}`;
      return h(MenuItem, {
        key: chapter.idName,
        component: Link,
        to: path,
        selected: path === pathname
      },
      h(ListItemText, {}, chapter.title));
    });
  },

  render: function () {
    const { actConfig, open, location: { pathname } } = this.props;
    return (
      h(Drawer, { open },
        h('div', {},
          h(MenuList, {},
            h(ListItem, { key: 'header' },
              h(ListItemText, {}, actConfig.title),
              h(IconButton, { onClick: this.props.toggleDrawer },
                h(ChevronLeft, {}))),
            h(Divider, {}),
            this.renderMenuItems({ actConfig, pathname }))))
    );
  }
});

module.exports = withRouter(DrawerMenu);

测试：

const React = require('react');
const sinon = require('sinon');
const { MemoryRouter } = require('react-router');
const DrawerMenu = require('./drawerMenu');

const h = React.createElement;

describe('drawerMenu', function () {
  const props = {
    open: true,
    toggleDrawer: sinon.spy(),
    actConfig: {
      title: 'test act title',
      chapterList: [{ title: 'chapter 1', idName: 'some-id-1' }, { title: 'chapter 2', idName: 'some-id-2' }]
    }
  };

  it('render', function () {
    const w = shallow(
      h(MemoryRouter, {},
        h(DrawerMenu, props)));
    console.log(w.debug());
  });
});

我曾尝试按预期将组件包装在 MemoryRouter 中，这确实有效果，但它不会呈现我习惯的效果。通常在执行 w.debug() 时，我会得到组件及其所有子组件的完整 html/jsx 输出。允许我执行非常方便的断言，例如 w.find(SomeComponent).assert.something.

我从 console.log 语句得到的输出：

<Router history={{...}}>
  <withRouter() open={true} toggleDrawer={[Function]} actConfig={{...}} />
</Router>

我一直在阅读 here (Using MemoryRouter with enzyme shallow testing) and looking at this one react-router-enzyme-context 我都试过了，但是将第二个参数传递给 shallow(h(DrawerMenu), context) 似乎没有任何效果，输出与没有它相同：

<ContextConsumer>
  [function]
</ContextConsumer>

我也尝试过使用 mount 而不是 shallow，但是它根本不输出任何东西，而且我最好还是想使用 shallow。

我觉得我有点接近或接近某事，只是缺少最后一块..

Answer 1

发现导入的wrapped组件有个属性WrappedComponent 那只是组件本身，然后再包装在 withRouter() 中。

以下用于测试组件的渲染：

const React = require('react');
const DrawerMenu = require('./drawerMenu').WrappedComponent;

const h = React.createElement;

describe('drawerMenu', function () {
  it('render', function () {
    const w = shallow(h(DrawerMenu, someProps));
    console.log(w.debug());
  });
});

输出：

<WithStyles(ForwardRef(Drawer)) open={true}>
  <div>
    <ForwardRef(MenuList)>
      <WithStyles(ForwardRef(ListItem))>
        <WithStyles(ForwardRef(ListItemText))>
          test act title
        </WithStyles(ForwardRef(ListItemText))>
        <WithStyles(ForwardRef(IconButton)) onClick={[Function]}>
          <ChevronLeftIcon />
        </WithStyles(ForwardRef(IconButton))>
      </WithStyles(ForwardRef(ListItem))>
      <WithStyles(ForwardRef(Divider)) />
      <WithStyles(ForwardRef(MenuItem)) component={{...}} to="/chapter1" selected={false}>
        .
        .
        .
      </ForwardRef(MenuList)>
    </ForwardRef(MenuList)>
  </div>
</WithStyles(ForwardRef(Drawer))>

但请记住，通过这种方式无法测试路由，只能测试内部组件。

浅酶反应路由器 v4 摩卡测试不起作用

react-router v4 mocha testing with enzyme shallow not working

javascript

mocha.js

react-router

enzyme