Question

我正在尝试测试具有以下结构的组件。嵌套的组件全部来自Material-UI。

Component.js

handleClickA = () => {
   this.setState({propA: null});
}

handleClickB = () => {
   this.handleClickA();
   if (this.state.mounted) {
     this.logoutUser();
   }
}

<div>
  <Poppers>
    <Grow>
      <Paper>
        <ClickAwayListener>
          <MenuList>
            <MenuItem
              onClick="this.handleClickA"
              test-id="menu-item-A"
            >
            {textA}
            </MenuItem>
            <MenuItem
              onClick="this.handleClickB"
              test-id="menu-item-B"
            >
            {textB}
            </MenuItem>
          </MenuList>
        </ClickAwayListener>
      </Paper>
    </Grow>
  </Poppers>
</div>

我一直试图使用mount和shallow来访问组件，然后使用酶的.find（）、. dive（）之类的东西来访问它们。我想模拟一次点击，然后检查包装器的状态，以查看道具是否已更改。

Component.test.js

const wrapper = shallow(<Component />) 
OR 
const wrapper = mount(<Component />)

e.g.
expect(wrapper.find("[test-id='menu-item-A']").length).toBe(1);
wrapper.setState({propA: 'value'});
wrapper.find("[test-id='menu-item-A']").simulate('click');
expect(wrapper.state('propA')).toEqual(null)

我觉得我已经尝试了所有方法来访问这些组件，为什么我不能“查找”它们并模拟点击？我真的很感谢您的帮助，我对此很陌生。我无权更改与代码结构有关的任何重要内容或使用非材料UI。我必须努力工作...

使用酶/玩笑测试深度嵌套的MaterialUI组件

0 个答案: