Question

我正在构建一个React应用程序，并且正在使用Enzyme，Jest和Sinon对其进行测试。我在应用程序测试的其他组件上使用过sinon.spy（）来验证onClick方法是否已被调用；但是，它不适用于此特定组件。我也知道，当我在浏览器中运行该应用程序时，onClick确实可以正常工作。我的测试结果失败-“ Expected：true; Received：false”。

此组件创建重定向到URL的按钮列表。该组件的代码如下：

import React from "react";
import List from "@material-ui/core/List";
import ListSubheader from "@material-ui/core/ListSubheader";
import {
  withStyles
} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import styles from "./styles";

class ChannelList extends React.PureComponent {
    handleClick = channelURL => async event => {
      const {
        history,
        enterChannel
      } = this.props;
      await enterChannel(channelURL);
      history.push(`/chat/${channelURL}`);
    };

    render() {
      const {
        classes: {
          channelListContainer,
          channelButtonList,
          channelButton
        },
        channels
      } = this.props;
      return ( <
        div className = {
          channelListContainer
        } >
        <
        Paper >
        <
        List className = {
          channelButtonList
        }
        subheader = { < ListSubheader color = "primary" > Channels < /ListSubheader>} >
          {
            channels.map((channel, index) => {
              const {
                name,
                url
              } = channel;
              return ( 
              <div key = {
                  name + index.toString()
                } >
                <Button data - testid = {
                  `${name}${index.toString()}`
                }
                onClick = {
                  this.handleClick(url)
                }
                className = {
                  channelButton
                } >
                { name } 
                </Button> 
              </div>
              );
            })
          } 
          </List> 
          </Paper> 
          </div>
        );
      }
    }

    export default withStyles(styles)(ChannelList);

我的测试代码如下：

import React from "react";
import {
  shallow
} from "enzyme";
import sinon from "sinon";
import ChannelList from "../ChannelList";
import List from "@material-ui/core/List";
import Button from "@material-ui/core/Button";

describe("<ChannelList />", () => {
      const props = {
        channels: [{
            name: "test-channel1",
            url: "www.test1.com"
          },
          {
            name: "test-channel2",
            url: "www.test2.com"
          },
          {
            name: "test-channel3",
            url: "www.test3.com"
          }
        ]
      };

      let wrapper;

      beforeEach(() => {
          wrapper = shallow( <ChannelList { ...props}/>).dive();
      });

        test("handleClick is called when clicking on a list item", () => {
          const spy = sinon.spy(wrapper.instance(), "handleClick");
          const button1 = wrapper.find({
            "data-testid": "test-channel10"
          }).dive();
          expect(button1).toHaveLength(1);
          console.log(button1.debug());
          button1.simulate("click");
          expect(spy.called).toBe(true);
        });
});

Answer 1

这是问题所在：您的Button元素具有以下属性：

onClick = {
      this.handleClick(url)
}

它没有将onClick回调设置为this.handleClick()，而是在渲染期间立即调用this.handleClick()，然后将onClick prop设置为回调的返回值。功能。因为这是在创建间谍之前发生的，所以测试失败。

您可能应该这样做

onClick = {
   () => this.handleClick(url)
}

...或类似的

用酶/笑话模拟不进行Sinn Spy的点击测试

1 个答案: