Jest React-如何定位List中的特定项目，然后模拟点击事件

Question

我有一个列表<List>，每个<ListItem>都有一个唯一的类，稍后将用于模拟点击事件。

<List>
   <ListItem
     className={'list-item-foo'}
     button
     onClick={() => this.handleEventToUpdateState('foo')}
   >
      <ListItemText inset primary='foo' />
   </ListItem>

   <ListItem className={'list-item-bar} button onClick={() => this.handleEventToUpdateState('bar')}>
      <ListItemText inset primary='bar' />
   </ListItem>
</List>

在React测试中

component.find('ListItem.list-item-foo').simulate('click');

但是，似乎事件处理程序根本没有被触发。

能否请您解释一下如何定位元素并触发事件？

Answer 1

您的代码似乎在几个地方坏了，也许这就是您无法正确测试组件的问题，请看示例：

export class App extends React.Component {
  handleEventToUpdateState() {
    // ...
  }

  render() {
    return (
      <List>
        <ListItem
          className={"list-item-foo"}
          button
          onClick={() => this.handleEventToUpdateState("foo")}
        >
          <ListItemText inset primary="foo" />
        </ListItem>

        <ListItem
          className={"list-item-bar"}
          button
          onClick={() => this.handleEventToUpdateState("bar")}
        >
          <ListItemText inset primary="bar" />
        </ListItem>
      </List>
    );
  }
}

还有index.test.js中的测试场景：

it("works", () => {
  const wrapper = shallow(<App />);
  const instance = wrapper.instance();

  const spy = jest.spyOn(instance, 'handleEventToUpdateState')

  wrapper.find(".list-item-foo").simulate("click");
  expect(spy).toHaveBeenCalled();
});

代码现在正在正确地进行测试-通过单击监视执行的方法，并检索该方法确实按预期调用。