无法比较包含绑定到我在 React 中的类的函数的对象

Posted 2023-02-22

【中文标题】无法比较包含绑定到我在 React 中的类的函数的对象

【英文标题】：Unable to compare object containing functions bound to my class in React

【发布时间】：2019-04-10 12:12:20

【问题描述】：

我的班级有以下构造函数：

constructor() 
    super();

    this.togglePlay = this.togglePlay.bind(this);
    this.toggleMute = this.toggleMute.bind(this);
    this.toggleMaximize = this.toggleMaximize.bind(this);

    this.state = 
      play: false,
      mute: false,
      maximize: false,
      actions: 
        togglePlay: this.togglePlay,
        toggleMute: this.toggleMute,
        toggleMaximize: this.toggleMaximize
      
    ;
  

在我的测试中，我想比较一下状态...

it('should have the correct state', () => 
    const wrapper = shallow(<Provider ...minProps />);

    const expectedState = 
      play: false,
      mute: false,
      maximize: false,
      actions: 
        togglePlay: () => ,
        toggleMute: () => ,
        toggleMaximize: () => 
      
    ;

    const actualState = wrapper.state();

    expect(expectedState).toEqual(actualState);
  );

运行测试时，我收到以下错误：

Expected value to equal:
  "actions": "toggleMaximize": [Function bound toggleMaximize], "toggleMute": [Function bound toggleMute], "togglePlay": [Function bound togglePlay], "maximize": false, "mute": false, "play": false
Received:
  "actions": "toggleMaximize": [Function toggleMaximize], "toggleMute": [Function toggleMute], "togglePlay": [Function togglePlay], "maximize": false, "mute": false, "play": false

由于功能比较，测试失败。我怎样才能让这个测试通过？

【问题讨论】：

你使用的是哪个断言库。

@front_end_dev 开玩笑（或期望）

【参考方案1】：

测试失败是因为您正在比较不同的函数引用，在您的模拟中您正在创建匿名函数，并且它们明确需要绑定在您的构造函数上。使此测试通过的一种方法是访问组件的实例，然后访问绑定的函数并将它们分配给您的模拟状态：

it('should have the correct state', () => 
    const wrapper = shallow(<Provider ...minProps />);

    const expectedState = 
      play: false,
      mute: false,
      maximize: false,
      actions: 
        togglePlay: wrapper.instance().togglePlay,
        toggleMute: wrapper.instance().toggleMute,
        toggleMaximize: wrapper.instance().toggleMaximize
      
    ;

    const actualState = wrapper.state();

    expect(expectedState).toEqual(actualState);
);

通过这种方式，您将指向相同的绑定函数及其引用。

另一种可行的解决方案是使用jest's expect.any(constructor)

it('should have the correct state', () => 
    const wrapper = shallow(<Provider ...minProps />);

    const expectedState = 
      play: false,
      mute: false,
      maximize: false,
      actions: 
        togglePlay: expect.any(Function),
        toggleMute: expect.any(Function),
        toggleMaximize: expect.any(Function)
      
    ;

    const actualState = wrapper.state();

    expect(expectedState).toEqual(actualState);
);

虽然不能 100% 确定最后一个想法，但希望对您有所帮助！