javascript - react-router v4 mocha 测试与酶浅不工作
问题描述
我有这个简单的反应类组件,我想对其进行单元测试。在我实现 react-router 并将组件包装withRouter
并开始使用之前Link
,我可以在 mocha 测试期间使用酶的浅层函数轻松渲染组件。但是,情况不再如此,因为react-router
's 的组件取决于上下文。
组件:
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());
});
});
我试图将组件包装在 aMemoryRouter
中,这确实有效果,但它并没有呈现我习惯的内容。通常,当我这样做时,w.debug()
我会得到组件及其所有子组件的完整 html/jsx 输出。允许我执行非常方便的断言,例如w.find(SomeComponent).assert.something
.
我从 console.log 语句得到的输出:
<Router history={{...}}>
<withRouter() open={true} toggleDrawer={[Function]} actConfig={{...}} />
</Router>
我一直在这里阅读(使用 MemoryRouter 和酶浅层测试)并查看我尝试过的这个react-router-enzyme-contextshallow(h(DrawerMenu), context)
,但是将第二个参数传递给似乎没有任何效果,输出是与没有它一样:
<ContextConsumer>
[function]
</ContextConsumer>
我也尝试过使用mount
而不是浅,但它根本不输出任何东西,而且我最好还是想使用浅。
我觉得我有点接近,或者接近某事,只是错过了最后一块..
解决方案
发现导入的封装组件有一个属性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))>
但请记住,以这种方式无法测试路由,只能测试内部组件。
推荐阅读
- java - 将 LocalDate 复制到 java.time 中日历中的另一个位置
- elasticsearch - ES_dsl.Q() 中“路径”的功能是什么?
- sql - 有没有办法从 SQL 中的一组列中获取所有非空值?
- python - 在 Jupyter 笔记本中重新加载 Python 模块(不自动重新加载)
- android - 快速启动状态选择后模拟器关闭
- javascript - 在单文件组件方法中使用 vue-styled-components
- ios - 与文本字段的用户默认值比较
- angular - 然后如何以角度2返回Promise的数据
- php - 教义 - 实体侦听器中注入实体之间的区别
- python - 加快python图像颜色阈值/过滤