하위 구성요소가 렌더링되었는지 테스트하려면 어떻게 해야 합니까?

하위 구성요소가 렌더링되었는지 테스트하려면 어떻게 해야 합니까?

효소에서는 다음과 같이 하위 구성요소의 존재를 확인할 수 있습니다.

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

리액트 테스트 라이브러리의 이 테스트와 동등한 것은 무엇입니까?제가 찾은 모든 온라인 예제는 돔 요소를 찾는 매우 간단한 테스트에 불과합니다.자녀 컴포넌트를 렌더링하는 예제는 포함되어 있지 않습니다.하위 구성 요소를 찾으려면 어떻게 해야 합니까?

하위 구성요소가 렌더링되었는지 여부를 확인하지 마십시오. 하위 구성요소는 구현 세부 정보를 테스트하는 중이므로(어느 테스트 라이브러리에서 렌더링하지 않는지를) 확인해야 합니다.

자녀 컴포넌트의 일부 텍스트가 렌더링되었는지 확인하거나 자녀 래퍼 요소에 data-testid를 지정한 후 @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();
});

@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();

이 목적으로 리액트 테스트 렌더러를 사용했습니다.

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

'실장 상세 테스트'가 아니라 '로드'가 그 반대라고 생각합니다.인디케이터 컴포넌트는 테스트 케이스를 수리할 필요 없이 수정할 수 있습니다.

돌아온 이래null요소를 찾을 수 없는 경우 다음 작업을 수행할 수 있습니다.

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

요소를 찾을 수 없는 경우에도 느려집니다.그래서 다음 것도 잘 될 거예요.

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

하위 컴포넌트 내에서 텍스트 또는 테스트 ID를 확인하는 것은 구현 세부사항을 테스트하는 것이라고 말한 모든 사용자의 의견에 동의합니다.

그러나 자녀 컴포넌트의 구현 세부사항을 제거하기 위해 조롱을 사용할 수 있습니다.

테스트할 코드:

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

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

Child Component가 렌더링되었는지 확인하는 테스트 코드:

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.

언급URL : https://stackoverflow.com/questions/60041468/how-do-i-test-that-a-child-component-is-rendered