Question

我必须测试一个非常不寻常的情况，在测试中，我应该单击到Material-ui包装的某个组件，该组件位于react-verticalized的List内。

我已经沉迷于它-

wrapper
  .find(TreeView)
  .dive()
  .find(AutoSizer)
  .renderProp('children', {})
  .find(VirtualizedTree)
  .dive()
  .renderProp('rowRenderer', { index: 0, props: {...} });

如果我调试它，我会看到此结果-

<WithStyles(TreeNode) data-test="projected-tree" components={{...}} onSelectToggle={[Function]} onExpandToggle={[Function]} width={...} style={...} node={{...}} level={0} isOdd={true} />

我想要单击的组件位于TreeNode内部，但是当我尝试潜水时，收到与我在项目中使用的自定义主题相关的错误，这是因为失去了与自定义主题的连接。 / p>

我认为发生这种情况是因为它是通过List的rowRenderer属性呈现的。

也许有人对如何在List.rowRenderer内部传递自定义主题有任何想法？

Answer 1

在Material UI Testing Guide中，列出了三个对测试有用的功能，为了使主题正常工作，您可能需要使用其中一个功能来装载/创建/渲染组件：< / p>

createShallow-用于浅层渲染
createMount-用于完整的DOM渲染和组件生命周期
createRender-用于测试生成的HTML

在您的情况下，您需要createShallow或createMount：

import { createShallow, createMount } from "@material-ui/core/test-utils";
const shallow = createShallow();
const mount = createMount();

it('should work with shallow', () => {
  const wrapper = shallow(<MuiThemeProvider theme={customTheme}>
    {element}
  </MuiThemeProvider>);
});

it('should work with mount', () => {
  const wrapper = mount(<MuiThemeProvider theme={customTheme}>
    {element}
  </MuiThemeProvider>);
});

如何测试酶，反应虚拟化，材料用户界面？

1 个答案: