Question

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

Answer 1

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

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

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

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

1 个答案: