Question

我有一个childComponent，上面有文字。

我写了test来检查该文本。该测试通过，直到我做了两个值得注意的更改。。我需要保留这些更改，然后使测试通过。

该组件已重构为使用forwardRef
我要测试文本的childComponent被定义为parentComponent的属性，例如parentComponent.childComponent = childComponent

当parentComponent不使用forwardRef

时，测试工作正常

当我在控制台中打印父级的html（）时，我可以在childComponent中看到文本。

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

还有什么其他方法可以使用Enyzme / React在组件中获取childComponent文本？

Answer 1

使用 forwardRef 时，这是一种方法：

我在酶测试中具有 helper 功能，该功能允许您访问 forwardRef 包装器中的 class 功能：

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");
  });

如何在酶/反应中获取子组件的text（）

1 个答案: