如何在使用反应测试库进行测试时渲染两个组件？

Question

我想使用 React 测试库渲染两个组件。

我有两个组件，即 firstComponent 和 secondComponent

在我的测试中，我渲染了一个组件，如下所示

test('check test', async() => {
    const { getByTestId } = utils.render(
        <firstComp />,
        [
            utils.gqlMock(queryname, query-type),
        ]
    );
    //some logic here to do with getBytestid
)};

现在的问题是如何在 utils.render 方法

中使用 mock 渲染组件 secondComponent

我试过

test('check test', async() => {
    const { getByTestId } = utils.render(
        <secondComp/>,
        [  utils.gqlMock(queryname3, query-type3),
        ]
        <firstComp />,
        [
            utils.gqlMock(queryname, query-type),
        ]
    );
    //some logic here to do with getBytestid
)};

但这会引发一些错误。似乎不是正确的方法。有人可以帮我解决这个问题吗？谢谢。

Answer 1

我从来没有这样做过，但我会尝试这样的事情：

    const { getByTestId } = utils.render(
        <>
           <SecondComponent />
           <FirstComponent />
        </>,
        [...]
    );

如何在使用反应测试库进行测试时渲染两个组件？

How to render two components while testing using react-testing library?

react-testing-library