我正在使用Jest和Enzyme快速测试我的React应用程序。我正在尝试导出我的组件的可测试版本,该版本未包含在更高阶的组件中。
然后我想导出包装的组件,以便我的应用程序可以使用它,还有一个可测试的版本,即我的组件的非包装版本。
这是我的组成部分:
NavBar.jsx
const NavBar = ({props}) => {(
<div>...</div>
)}
export { NavBar as TestableNavBar };
export default withStyles(styles)(NavBar);
NavBar.test.js
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { TestableNavBar } from './NavBar';
const props = {
...
};
describe('Navbar', () => {
it('should render correctly', () => {
const wrapper = shallow(<TestableNavBar {...props} />);
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
});
});
上面会生成如下所示的快照:
<div>
<withStyles(AppBar)
className=""
>
<withStyles(Toolbar)
disableGutters={true}
>
<withStyles(IconButton)
aria-label="open drawer"
className=""
color="contrast"
onClick={[Function]}
>
...
</div>
我真的无法理解为什么它仍然试图渲染HOC?
答案 0 :(得分:2)
Enzyme's shallow
方法只是呈现在render方法(AppBar
,Toolbar
等)中声明的子项,并且输出显示它们被相同的{{1}包装} HOC。
导出根组件的可测试版本允许您实际测试其实际输出(withStyles
),但不会阻止其子组件被div
HOC包裹。
如果要测试组件的最终输出,可以考虑切换到Enzyme's mount
渲染方法。