[英]react-router v4 mocha testing with enzyme shallow not working
我有這個簡單的反應 class 組件,我想對其進行單元測試。 在我實現 react-router 並將組件包裝在withRouter
中並開始使用Link
之前,我可以在 mocha 測試期間使用酶的淺層 function 輕松渲染組件。 但是,情況不再如此,因為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 output。 允許我執行非常方便的斷言,例如w.find(SomeComponent).assert.something
。
我從 console.log 語句中得到的 output :
<Router history={{...}}>
<withRouter() open={true} toggleDrawer={[Function]} actConfig={{...}} />
</Router>
我一直在這里閱讀(使用 MemoryRouter 和酶淺層測試)並查看這個react-router-enzyme-context我都嘗試過,但是將第二個參數傳遞給shallow(h(DrawerMenu), context)
似乎沒有有任何效果,output 與沒有它相同:
<ContextConsumer>
[function]
</ContextConsumer>
我也嘗試過使用mount
而不是淺,但它根本沒有 output 任何東西,而且我最好還是想使用淺。
我覺得我有點接近,或者接近某事,只是錯過了最后一塊..
發現導入的封裝組件有一個屬性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());
});
});
Output:
<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))>
但請記住,以這種方式無法測試路由,只能測試內部組件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.