如何测试返回另一个组件的 React 组件？

Question

我有一个这样的 React 组件：

MyComponent({data}) {
    if(condition1) return <OtherComponent data-testid="custom-element-one" />
    if(condition2) return <OtherComponentwo data={data} data-testid="custom-element-two" />

    return <ElseComponent data-testid="custom-element-else" />
}

如何创建一个react-test笑话测试，检查给定的数据，返回什么组件？

我试图这样解决它：

it('example', () => {
   const { queryByTestId } = render(<MyComponent data={{foo:"Bar}} />

   expect(queryByTestId('custom-element-one')).toBeTruthy()
})

它给了我一个错误，因为queryByTestId('custom-element-one')返回 null。 我怀疑，这是因为OtherComponent本身不是一个元素，而是这样的： <>...</>

如果渲染的组件等于OtherComponent 、 OtherComponentTwo或ElseComponent ，如何进行测试？

这些OtherComponent 、 OtherComponentTwo或ElseComponent是从第三方库导入的。 我无法更改它们，我无法控制它们的结构，其中一些可能没有文本内容。 我只想检查返回的组件是否等于其中之一。

Answer 1

您应该将data-testid作为道具传递给子组件。 您需要在子组件根元素中传递此道具，例如

const OtherComponent = (props) => ( 
    <div data-testid={props["data-testid"]}>  
      {children}
    </div>
);

const OtherComponentwo = (props) => (
    <div data-testid={props["data-testid"]}>  
      {children}
    </div>
);

const ElseComponent = (props) => (
    <div data-testid={props["data-testid"]}>  
      {children}
    </div>
);

MyComponent({data}) {
    if(condition1) return <OtherComponent data-testid="custom-element-one" />
    if(condition2) return <OtherComponentwo data={data} data-testid="custom-element-two" />

    return <ElseComponent data-testid="custom-element-else" />
}

现在，如果您将使用给定的方法测试您的组件，您应该获得特定的根元素

it('example', () => {
   const { queryByTestId } = render(<MyComponent data={{foo:"Bar}} />

   expect(queryByTestId('custom-element-one')).toBeTruthy()
})