Реакт / энзим - Как проверить референсную функцию

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, я нашел способ сделать это с отрендеренным компонентом shallow, высмеяв ref:

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

Answer 2

Может быть, вы можете попробовать вот так: когда вы пишете более сложный код, тогда вам нужно также писать сложные тесты, я надеюсь, это вам поможет.

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();

Answer 3

Согласно в разделе React docs для Callback Refs , «React будет вызывать refback call с элементом DOM, когда компонент монтируется».

shallow не выполняет полныйDOM рендерится, поэтому компонент никогда не монтируется и Callback Ref никогда не вызываетсяЧтобы убедиться, что Refback Ref вызывается, вам необходимо выполнить полный DOM-рендеринг с mount.

Начиная с v2.7 Enzyme обеспечивает ReactWrapper.getDOMNode как часть API полного рендеринга DOM .

Вы можете использовать mount в сочетании с ReactWrapper.getDOMNode, чтобы получить доступ к узлу DOM и проверить на indeterminate следующим образом:

const wrapper = mount(<MyComponent {...props} />);
expect(wrapper.find('#input-element').first().getDOMNode().indeterminate).toBeTruthy();  // SUCCESS

Answer 4

Из 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