Question

有一些material-ui组件无法将其结果呈现在与父组件放置组件相同的位置。其中包括Dialog，Menu等

这使得显然无法在jest.js包装器中测试其内容是否存在，其中包含一些父组件。

例如给出以下组件：

class DropdownMenu extends React.Component {
  onButtonClick = (e) => {
    this.setState({ open: true, anchorEl: e.currentTarget });
  }

  render() {
    return (
      <div>
        <Button onClick={this.onButtonClick}>Menu</Button>
        <Menu
          open={this.state.open}
          onRequestClose={() => this.setState({ open: false })}
        >
          <MenuItem label="Home" />
          <MenuItem label="Sign in" />
        </Menu>
      </div>
    );
  }
}

即使它应该直观地工作，这个测试也会失败：

it('renders some menu items', () => {
  const wrapper = mount(<AppMenu />);
  expect(wrapper).toContainReact(<MenuItem label="Home" />);
});

这是Jest输出的失败：

renders some menu items

Expected <AppMenu> to contain <withStyles(MenuItem) className="MenuItem" component={{...}} to={{...}}>Home</withStyles(MenuItem)> but it was not found.
HTML Output of <AppMenu>:
 <div><button tabindex="0" class="MuiButtonBase-root-3477017037 MuiButton-root-3294871568 MuiButton-flatContrast-53993421" type="button" role="button" aria-owns="simple-menu" aria-haspopup="true"><span class="MuiButton-label-49836587">Menu</span><span class="MuiTouchRipple-root-3868442396"></span></button><!-- react-empty: 5 --></div>

正如您所看到的，就像所有呈现的内容都是<Button>一样。实际上，当您在浏览器中渲染上述组件并展开菜单并检查它的菜单项元素时，它们将呈现在DOM中的其他位置，而不是在按钮出现的位置内或甚至附近。事实上，它们直接在文档的<body><div data-mui-portal="true"> ... </div>元素下面的div <body>内呈现。

那么如何测试这个菜单内容呢？

Answer 1

在状态更改之前，Menu不会呈现，因此您可以模拟Button上的点击，让其处理程序setState触发重新呈现，然后找到特定的MenuItem {1}}。

此外，这可能无需完全安装即可完成：

it('renders some menu items', () => {
  const wrapper = shallow(<AppMenu />);

  // find the Menu Button
  const button = wrapper.findWhere(node => node.is(Button) && n.prop('children') === 'Menu');

  // simulate a click event so that state is changed
  button.simulate('click');

  // find the Home MenuItem
  const menuItem = wrapper.findWhere(node => node.is(MenuItem) && n.prop('label') === 'Home');

  // make sure it was rendered
  expect(menuItem.exists()).toBe(true);
});

Answer 2

是的，这可能很棘手。问题有两个：

触发点击事件意味着您需要将测试设为异步功能
菜单项不在包装元素df['Date']= df.apply(lambda x: x['start'] + ' '+'to'+ ' '+x['end'],1)中-正如您指出的，它们在DOM中的其他位置。

对于菜单项，您需要将其定位在实际位置。打开菜单的按钮位于wrapper元素中，但菜单和菜单项将不在其中，因此您需要按角色获取菜单，然后才能通过菜单项中的文本获取菜单项。

这是我如何使用React Testing库执行此操作的示例。

df['Date']=df.groupby(df.index).apply(lambda x:x['start'].str.cat(x['end'], sep=' to '))



 start         end id                      Date
0  10/01/2020  11/01/2020  a  10/01/2020 to 11/01/2020

React，Jest和Material-UI：如何测试在模态或弹出窗口中呈现的内容

2 个答案: