相关疑难解决方法(0)

有一些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" />);
});

这是杰斯特失败的输出：

renders some menu items

Expected <AppMenu> to contain <withStyles(MenuItem) className="MenuItem" …