酶呈现包裹的成分而不是基础成分

时间:2017-11-20 08:02:57

标签: reactjs jestjs enzyme enzyme-to-snapshot

我正在使用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?

1 个答案:

答案 0 :(得分:2)

Enzyme's shallow方法只是呈现在render方法(AppBarToolbar等)中声明的子项,并且输出显示它们被相同的{{1}包装} HOC。

导出根组件的可测试版本允许您实际测试其实际输出(withStyles),但不会阻止其子组件被div HOC包裹。

如果要测试组件的最终输出,可以考虑切换到Enzyme's mount渲染方法。