如何测试子组件是否已呈现？

Question

在酶中，您可以像这样检查子组件的存在：

expect(wrapper.find(ChildComponent)).toHaveLength(1)

反应测试库中的这个测试相当于什么？我发现的所有在线示例都只涵盖了寻找 dom 元素的非常简单的测试——没有一个包含渲染子组件的示例。你如何找到一个子组件？

Answer 1

您可以使用@testing-library/jest-dom库。

成分：

<div role="root">       
    <div data-testid="parent">
        <div data-testid="child">
            content
        </div>
    </div>
</div>

测试：

import '@testing-library/jest-dom'
import {render} from '@testing-library/react';

describe('My component', () => {
    test('should render component2', () => {
        const { getByRole, getByTestId } = render(<Component/>);

        const root = getByRole('root');
        const parent = getByTestId('parent');
        const child = getByTestId('child');

        expect(root).toContainElement(parent);
        expect(parent).toContainElement(child);
        
        expect(child).not.toContainElement(parent); // Pass
        expect(child).toContainElement(parent); // Throw error!    
    });
});

另一个解决方案是使用库within中的函数@testing-library/react：

import { within } from '@testing-library/react';
...

expect(within(parent).queryByTestId('child')).not.toBeNull();

Answer 2

你不应该检查你的子组件是否被渲染，因为它正在测试实现细节（哪个测试库不鼓励你这样做）。

您可以检查子组件中的一些文本是否已呈现，或者您可以将 data-testid 提供给 child 中的包装元素，然后使用来自 @testing-library/jest-dom 的 .toBeInTheDocument

expect(getByText(/some text/i)).toBeInTheDocument();

或者

expect(getByTestId('your-test-id')).toBeInTheDocument();

更新：示例

// Child Component
function ChildComponent() {
    return <div>Child Element</div>;
};

// Parent
export default function Parent() {
    return (
        <div className="App">
            <ChildComponent />
        </div>
    );
}

测试：

import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import Parent from "./App";

test("test child component", () => {
  const { getByText } = render(<Parent />);
  expect(getByText(/child element/i)).toBeInTheDocument();
});

Answer 3

我为此目的使用了React Test Renderer ：

import TestRenderer from 'react-test-renderer';

import ItemList from 'components/ItemList';
import LoadingIndicator from 'components/LoadingIndicator';

test('renders loading indication', () => {
    const testRenderer = TestRenderer.create(
        <ItemList items={[]} isLoading={true}/>
    );
    const testInstance = testRenderer.root;
    testInstance.findByType(LoadingIndicator);
});

我不认为这是“测试实现细节”，恰恰相反 - LoadingIndicator 组件可以修改而无需修复测试用例。

Answer 4

我同意每个人的说法，检查子组件内的文本或测试 ID 就是测试实现细节。

但是我们可以使用模拟来摆脱子组件的实现细节。

要测试的代码：

import { ChildComponent } from 'child-from-somewhere';

export function Parent() {
    return (
        <div className="App">
            <ChildComponent />
        </div>
    );
}

检查 ChildComponent 是否已呈现的测试代码：

import { render } from "@testing-library/react";
import React from "react";
import { Parent } from "./parent";

jest.mock("child-from-somewhere", () => ({
    ChildComponent: () => <div data-testid="ChildComponent">ChildComponent</div>,
}));

describe("ChildComponent component", () => {
    it("should be in the document", () => {
        const { getByTestId } = render(<Parent />);
        expect(getByTestId("ChildComponent")).toBeInTheDocument();
    });
});

这样，测试就可以独立于ChildComponent.

Answer 5

因为如果找不到元素则query*返回，您可能只是null

expect(queryByTestId('test-id-you-provided')).toEqual(null);
expect(queryByTestId('some-other-test-id-you-provided')).not.toEqual(null);

getBy*如果找不到元素也会抛出异常。所以下一个应该也可以工作

getByTestId('test-id-you-provided');