2

我正在使用 Jest 和 Enzyme 对我的 React 应用程序进行快照测试。我正在尝试导出未包装在更高阶组件中的组件的可测试版本。

然后我想导出包装的组件，以便我的应用程序可以使用它，以及一个可测试的版本，即我的组件的非包装版本。

这是我的组件：

导航栏.jsx

const NavBar = ({props}) => {(
  <div>...</div>
)}

export { NavBar as TestableNavBar };

export default withStyles(styles)(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？

4

1 回答 1

2

Enzyme 的shallow方法只是渲染在 render 方法中声明的子节点（AppBar,Toolbar等），输出显示它们被同一个withStylesHOC 包裹。

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

如果您想测试组件的最终输出，您可以考虑切换到Enzyme 的mount渲染方法。

于 2017-11-21T17:11:47.393 回答