javascript - React/enzyme - 如何测试引用功能

Question

我有一个组件，其中包含已将函数分配给 ref 的输入，我尝试为其编写测试:

 <input
   id="input-element"
   type="checkbox"
   checked={isChecked}
   ref={(input) => {
       if (input) {
           input.indeterminate = true;
       }
   }}
   className="checkbox" />

我的问题是如何检查输入不确定是否设置为真。文档 https://airbnb.io/enzyme/docs/api/ReactWrapper/ref.html没有帮助我，因为只有非常简单和无用的例子。

我试过这样测试:

const wrapper = shallow(<MyComponent {...props}/>);
expect(wrapper.find('#input-element').prop('indeterminate')).toBeTruthy();

但是 wrapper.find('#input-element').prop('indeterminate') 返回 undefined

Answer 1

如果您只关心测试 ref 设置回调而不是 ref 组件本身，我已经找到了一种通过模拟 ref 来使用 shallow 呈现的组件来执行此操作的方法:

const mockRef = {};
const wrapper = shallow(<MyComponent/>);
const inputElement = wrapper.find('#input-element');
inputElement.getElement().ref(mockRef)
expect(mockRef.indeterminate).toEqual(true);