lundi 26 novembre 2018

How to get text() of Child Component in Enzyme / React

I've got a childComponent that has text.

I've written a test that is checking for that text. That test passed until I made two notable changes. I need to keep those changes, and get the test to pass.

  1. The component has been refactored to use forwardRef
  2. The childComponent I'm trying to test for text is defined as a property of the parentComponent e.g. parentComponent.childComponent = childComponent

The test works fine when the parentComponent does not use forwardRef

I can see the text in the childComponent when I print the html() of the parent in the console.

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;

I've tried:

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

What are other ways to get the childComponent text in a component using Enyzme / React?

Aucun commentaire:

Enregistrer un commentaire