react-router v4 mocha 测试与酶浅不工作

Posted

技术标签:

【中文标题】react-router v4 mocha 测试与酶浅不工作【英文标题】:react-router v4 mocha testing with enzyme shallow not working 【发布时间】:2020-03-08 07:39:10 【问题描述】:

我有一个想要进行单元测试的简单反应类组件。在我实现 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) 并查看这个react-router-enzyme-context 我都尝试过,但是将第二个参数传递给shallow(h(DrawerMenu), context) 似乎没有任何效果,输出与没有它时相同:

<ContextConsumer>
  [function]
</ContextConsumer>

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

我觉得我有点接近,或者接近某事,只是错过了最后一部分..

【问题讨论】:

【参考方案1】:

发现导入的封装组件有一个属性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))>

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

【讨论】:

以上是关于react-router v4 mocha 测试与酶浅不工作的主要内容,如果未能解决你的问题,请参考以下文章

javascript 如果挂起,如何调试mocha v4的示例

javascript 如果挂起,如何调试mocha v4的示例

react-router 从 v3 版本升到 v4 版本,升级小记

从 v3 迁移到 v4 react-router 时出现错误

在 react-router V4 中,如何以编程方式设置查询字符串参数?

react-router v4.2.2 开关不工作;始终显示主要组件