반응 테스트 라이브러리 - 빈 div가 있는지 점검하십시오.

반응 테스트 라이브러리 - 빈 div가 있는지 점검하십시오.

컴포넌트를 테스트하고 있는데ItemLength = 1,render돌아온다null.

const { container, debug } = render(<MyComp ItemLength={1} />);

내가 전화했을 때debug()내 테스트에서, 그것은 a를 보여준다.<div />컴포넌트가 테스트에서 빈 div를 반환하는지 확인하려면 어떻게 해야 합니까?

갱신하다

이후 사용toBeEmtpy는 폐지되었습니다.

---

jest-dom's를 사용할 수 있습니다.

const { container } = render(<MyComp ItemLength={1} />)
expect(container.firstChild).toBeEmpty()

다음은 농담의 기대치를 확장하지 않고 작동해야 합니다.

const { container } = render(<MyComp ItemLength={1} />)
expect(container.firstChild).toBeNull();

업데이트: 2020년 새로운 방식

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

...

render(<MyComp ItemLength={1} />);

const child = screen.queryByTestId('data-testid-attribute-value');

expect(child).not.toBeInTheDocument();

.toHaveLength(0)도 jest-dom 확장자 없이 동작합니다.

const wrapper = render(<MyComp ItemLength={1}/>);
expect(wrapper.container.innerHTML).toHaveLength(0);

toBeEmpty- 경고 던지기, 반드시 사용해야 합니다.toBeEmptyDOMElement대신

    const pageObject = cretePage(<UserResources />, appState);

    expect(pageObject.noContent).toBeInTheDocument();
    expect(pageObject.results).toBeEmptyDOMElement();

빈 div를 테스트하려고 하므로 테스트하는 방법 중 하나는 노드를 대조하는 것입니다(또 다른 방법은 렌더링된 노드의 수).

getByText(container, (content, element) => element.tagName.toLowerCase() === 'div')

js-dom's를 사용할 수 있습니다.toBeEmptyDOMElement방법.https://github.com/testing-library/jest-dom#tobeemptydomelement

사용하기 전에toBeEmptyDOMElement를 인스톨 할 필요가 있습니다.jest-dom농담도 하고.https://github.com/testing-library/jest-dom#usage

const { container } = render(<MyComp ItemLength={1} />)
expect(container.firstChild).toBeEmptyDOMElement()

주의:toBeEmpty메서드가 권장되지 않으며 사용할 것을 권장합니다.toBeEmptyDOMElement

이전 답변에서 벗어나기 위해 다음 사항이 작동하며 아마도 다음 항목에 의존하지 않고 좀 더 깔끔할 것입니다.data-testid또는screen역할을 확인합니다.

import { render } from "@testing-library/react";

// Components
import { YourComponent } from "<Path>/YourComponent";

describe("YourComponent", () => {
  it("component should be an empty element", () => {
    const { container } = render(<YourComponent />);

    expect(container).toBeEmptyDOMElement();
  });

  it("component should not be an empty element", () => {
    const { container } = render(<YourComponent />);

    expect(container).not.toBeEmptyDOMElement();
  });
});

언급URL : https://stackoverflow.com/questions/56267336/react-testing-library-check-the-existence-of-empty-div