Question

我有一个包含输入的组件，该输入已为ref分配了功能，我尝试为其编写测试：

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

我的问题是如何检查输入不确定的输入是否设置为true。文档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);

Answer 2

根据the React docs section on Callback Refs，“安装组件时，React将使用DOM元素调用ref回调”。

/python/stack$ python3.7 sum.py [12, 23]不会进行完整的DOM渲染，因此永远不会挂载组件，也永远不会调用Callback Ref。为确保调用回调参考，您将需要使用shallow进行完整的DOM渲染。

Starting with v2.7 mount提供ReactWrapper.getDOMNode作为Full DOM Rendering API的一部分。

您可以结合使用Enzyme和mount来访问DOM节点并测试ReactWrapper.getDOMNode，如下所示：

indeterminate

Answer 3

来自Enzyme github：

您可能已经注意到ShallowRenderer没有ref（）方法的文档，而MounedRenderer却有。如果要测试裁判，必须挂载。

我相信原因是浅层渲染无法维护内部实例，因此无法容纳引用。那就是浅渲染的目的。甚至FB ReactTestUtils的shallowRendering也不能与引用一起使用。

https://github.com/airbnb/enzyme/issues/316

您需要使用mount而不是shallowMount。

也在此处检查：

https://airbnb.io/enzyme/docs/api/ReactWrapper/ref.html

Answer 4

也许您可以这样尝试：当您编写更复杂的代码时，还需要编写复杂的测试，希望对您有所帮助。

handle = (e) => {
   // indeterminate = true;
   // whatever you what to do
}

<input
   id="input-element"
   type="checkbox"
   checked={isChecked}
   ref="inputRef"
   onChange={() => this.handle()}
   className="checkbox">

测试代码

const wrapper = shallow(<MyComponent {...props}/>);
const inputElement = wrapper.find('#input-element').prop();
expect(inputElement.ref).toEqual("inputRef");
inputElement.onClick();
// your condition I'm not sure
// expect(indeterminate).toBeTruthy();

反应/酶-如何测试参考功能

4 个答案: