Question

我有一个带有prop的组件，该组件调用传递值的prop函数。如何使用相同的酶编写测试？


<LabeledInput
                name='zip'
                onChange={this.props.onChange}
                onBlur={() => this.props.onBlur('zip')}
              />
beforeEach(() => {
    props = {
      onChange: sinon.spy(),
      onBlur: sinon.spy(),
    };
    wrapper = shallowWithIntl(<ContactCard {...props}/>);
  });
it('should call onChange prop', () => {
    const labeledInputs = wrapper.find(LabeledInput);
    let zipInput = labeledInputs.filterWhere(input => input.props().name === 'zip');
    expect(zipInput.props().onChange).to.equal(props.onChange);
  });

  it('should onBlur prop ', () => {
    const labeledInputs = wrapper.find(LabeledInput);
    let zipInput = labeledInputs.filterWhere(input => input.props().name === 'zip');
    expect(zipInput.props().onBlur).to.equal(props.onBlur);
  });

第一个（onChange测试）有效。第二个给出错误“ AssertionError：预期[Function：onBlur]等于[Function：proxy]”

Answer 1

您正在比较2个不同的函数引用，并试图断言它相等。

onBlur={() => this.props.onBlur('zip')}创建一个新的函数引用，然后调用this.props.onBlur('zip')

在您的断言中，您尝试匹配始终为假的() => this.props.onBlur('zip') === this.props.onBlur('zip')。

FWIW [Function: proxy]用于间谍功能。

可能的修复程序，可能可以在onBlur道具上寻找toHaveBeenCalled并使用该方式进行断言。

在Sinon世界中，似乎使用以下三种之一：

expect(props.onBlur.called).to.equal(true);
sinon.assert.called(props.onBlur);
assert(props.onBlur.called);

Answer 2

我能够模拟模糊事件并检查prop函数是否这样调用。

zipInput.props（）。onBlur（）

期望（props.onBlur.drawnWith（'zip'））。to.be.true;

如何测试组件属性是否等于另一个属性？

2 个答案: