Как получить текст () дочернего компонента в Enzyme / React

Question

У меня есть childComponent с текстом.

Я написал test, который проверяет этот текст.Этот тест проходил до тех пор, пока я не сделал два заметных изменения. Мне нужно сохранить эти изменения и заставить тест пройти.

1. Рефакторинг компонента для использования forwardRef
2. ChildComponent, который я пытаюсь проверить для текста, определяется как свойство parentComponent, например, parentComponent.childComponent = childComponent

Тест работает нормально, когда parentComponent не использует forwardRef

Я вижу текст в childComponent, когда я печатаю html () родительского элемента в консоли.

HTML:

  <div class="parentComponent">
    <div class="childComponent">
      childText
    </div>
  </div>

parentComponent:

class SelectRef extends PureComponent {
   /// component code here
} 
// Bottom of parentComponent
const Select = forwardRef((props, ref) => <SelectRef {...props} innerRef={ref} />);
Select.displayName = "Select";
Select.Option = Option;

export default Select;

Я пробовал:

expect(component.dive().text()).to.contain("text");
expect(component.shallow().text()).to.contain("text");
expect(component.prop('children')).to.contain("text");

Как еще можно получить текст childComponent в компоненте с помощью Enyzme / React?

Answer 1

Вот способ сделать это при использовании forwardRef :

У меня есть функция helper в ферментном тесте, которая позволяет вам получить доступ к классу Функция в оболочке forwardRef :

const getComp = (comp, className = "default-class") =>
  comp
    .find("ComponentRef")
    .dive()
    .find(className);

Пример теста:

  it("should render the place holder text", () => {
      const component = shallow(
        <Component placeholderText="Select an option" selectName="test"/>
      );

      const comp = getComp(component)
      expect(comp.text()).to.contain("inner text of component");
  });