react-module-module: 디버깅 출력의 일부가 표시되지 않음

react-module-module: 디버깅 출력의 일부가 표시되지 않음

리액트 테스트 라이브러리와 리액트 재스트를 사용하여 컴포넌트를 테스트하고 있습니다.나는 이상한 문제에 직면해 있다.testing-library에서 렌더로 디버깅을 반환하고 있습니다.

test('component should work', async () => {
  const { findByText, debug } = render(<MyComponent />);
  const myElement = await findByText(/someText/i);
  debug();

});

스크린샷에서 볼 수 있듯이 불완전한 개발과 부모용 닫힘 태그가 누락되어 있습니다.

값을 변경해야 합니다.DEBUG_PRINT_LIMITenv variable(기본값은 7000).

예를 들어 다음과 같은 방법으로 테스트를 실행합니다.DEBUG_PRINT_LIMIT=10000 yarn test

출처 : https://github.com/testing-library/dom-testing-library/blob/master/src/pretty-dom.js#L33

이 버전을 사용하고 있습니다: "@testing-library/react": "^11.0.4"

300000을 최대 출력 길이로 변경할 수 있습니다.

debug(undefined, 300000)  

의 두 번째 인수debug()함수를 사용하여 설정 가능maxLengthToPrint.

예: 모든 것을 인쇄하는 방법myElement권장 접근법 사용:

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

render(<MyComponent />);
const myElement = await screen.findByText(/someText/i);

const maxLengthToPrint = 100000
screen.debug(myElement, maxLengthToPrint);

참조:

• API 문서:debug()렌더링 결과에서
• API 문서:screen.debug()

다른 옵션

screen.debug(undefined, Infinity);

Jest Preview(https://github.com/nvh95/jest-preview))를 사용하면 터미널의 HTML 대신 브라우저에서 테스트할 때 코드 두 줄만 사용하여 앱 UI를 볼 수 있습니다.

import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
    debug();
  });
});

와의 연동성이 좋다.jest그리고.react-testing-library.

• 개요 : https://www.jest-preview.com/docs/getting-started/intro
• 설치 가이드: https://www.jest-preview.com/docs/getting-started/installation

다른 답변이 모두 적절하지 않은 경우, 최종 제한 사항이 아님을 확인하십시오.예를 들어 VS 코드는 5000줄만 버퍼에 저장합니다.Mac OS 터미널을 사용해 보십시오.

이 방법은 효과가 있었습니다.

debug(undefined, 300000);

다음과 같이 render()에 전달된 모든 마크업을 제공합니다.

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

render(<MyComponent />);

다음 사이트에서 결과 마크업을 예쁘게 하는 등 결과 인쇄에 도움이 되는 다른 방법에 대해 읽어보실 수 있습니다.

디버깅용 API 문서

이건 내게 효과가 있었다.

const history = createMemoryHistory()
const { debug } = renderWithRedux(
    <Router history={history}>
        <SideBar />
    </Router>
, state);

screen.debug(debug(), 20000);

DOM 사이즈는 매우 커질 수 있기 때문에, 환경 변수 DEBUG_PRINT_LIMIT 를 개입시켜 인쇄하는 DOM 컨텐츠의 제한을 설정할 수 있습니다.기본값은 7000 입니다....을 보게 될 것이다.설정한 길이 또는 기본 크기 제한으로 인해 DOM 콘텐츠가 제거된 경우.테스트 실행 시 이 제한을 늘릴 수 있는 방법은 다음과 같습니다.

DEBUG_PRINT_LIMIT=10000 npm test

문서 디버깅에 대한 자세한 내용은 이쪽

@Haryono의 답변에 추가

또한 스크립트에 사일런트플래그가 설정되어 있지 않은지 확인합니다.

"test": "jest --config jest.config.js --silent";

사일런트 플래그를 삭제하면 동작합니다.

주의: 사일런트플래그는 경고와 디버깅 출력을 억제한다고 생각합니다.

또, 단말기로 스크롤 할 수 있는 것도 확인해 주세요.iTerm2에서는 "스크롤백 라인"을 1000으로 설정했습니다.'무제한 스크롤백'으로 변경하여 iTerm2:

로는, 는 표시되지 .<script /> ★★★★★★★★★★★★★★★★★」<style />태그입니다. 제 경우 DOM에서 코멘트 첨부 노드를 테스트해야 했습니다.

테스트에 모든 노드가 포함되도록 하려면 , 예쁜 노드를 사용할 수 있습니다.DOM은 다음과 같습니다.

// render DOM with a commented node
const html = {__html: '<!--this is a commented DOM element-->'};
const element = <div dangerouslySetInnerHTML={html} />;
const { container } = render(element);

// This is what tells RLT to print all nodes!
const prettyfiedDOM = prettyDOM(container, undefined, { filterNode: () => true}) || '';

expect(prettyfiedDOM.includes('<!--this is a commented DOM element-->')).toBeTruthy();

해 주세요.filterNode "이러다"를 반환합니다.true모든 DOM 노드를 인쇄하도록 RTL에 지시하므로 주석, 스타일, 태그 등을 테스트할 수 있습니다.에 대한 자세한 내용을 볼 수 있습니다.DOM 소스 코드를 사용하여 원하는 동작의 DOM 필터링을 구성합니다.

라이브 데모를 보려면 여기를 클릭하십시오.

도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/59763739/react-testing-library-some-portion-of-debugs-output-is-not-visible