Симуляция клик-теста с ферментом / шуткой, не вызывающей Шинона Шпиона

Question

У меня есть приложение React, которое я создаю, и я использую Enzyme, Jest и Sinon для его тестирования.Я использовал sinon.spy () для других компонентов в тесте приложения, чтобы подтвердить, что вызывается метод onClick;однако, это не работает с этим конкретным компонентом.Я также знаю, что onClick действительно работает, когда я запускаю приложение в браузере.Результаты моего теста дают ошибку - «Ожидается: истина; Получено: ложь».

Этот компонент создает список кнопок, которые перенаправляют на 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)
}

... или подобное.