Jest 및 React 테스트 라이브러리를 사용하여 className을 테스트하는 방법

Jest 및 React 테스트 라이브러리를 사용하여 className을 테스트하는 방법

저는 JavaScript 테스트에 전혀 익숙하지 않고 새로운 코드 베이스에서 일하고 있습니다.요소에 className을 체크하는 테스트를 쓰고 싶습니다.나는 Jest and React Testing Library와 함께 일하고 있다.아래는 다음 테스트입니다.버튼을 렌더링하는 테스트입니다.variant【클래스명】【클래스명】【클래스명】

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild) // Check for className here
})

는 효소가 있는 것과 로 검색하려고 했다.hasClass아무것도 찾을 수 없었습니다.현재 라이브러리(React Testing Library 및 Jest)에서 이 문제를 해결하려면 어떻게 해야 합니까?

리액트 테스트 라이브러리에서는 쉽게 할 수 있습니다.

하셔야 돼요.container 는또의 getByTextDOM을 사용하다브라우저에서와 같은 방법으로 사용자와 대화할 수 있습니다.

어떤 요.container.firstChild 요.container.firstChild.className.

요.classNameMDN에서는 요소에 적용된 모든 클래스가 공백으로 구분되어 반환되는 것을 확인할 수 있습니다.

<div class="foo">     => className === 'foo'
<div class="foo bar"> => className === 'foo bar'

경우에 따라서는 이것이 최선의 해결책이 아닐 수 있습니다.걱정하지 마세요.다른 브라우저 API를 사용할 수 있습니다.

expect(container.firstChild.classList.contains('foo')).toBe(true)

바로 그거야!테스트에서만 동작하는 새로운 API를 배울 필요가 없습니다.브라우저에 있는 그대로입니다.

수업 체크가 자주 하는 일이라면 프로젝트에 jeast-dom을 추가하여 시험을 쉽게 할 수 있습니다.

그 후 테스트는 다음과 같습니다.

expect(container.firstChild).toHaveClass('foo')

에도 편리한 있습니다.toHaveStyle도움이 될 거야

---

참고로 react-testing-library는 적절한 JavaScript 테스트 유틸리티입니다.그것은 다른 도서관들에 비해 많은 장점을 가지고 있다.JavaScript 테스트를 처음 접하는 경우 스펙트럼 포럼에 참여하시기 바랍니다.

라이브러리는 통상의 DOM 실렉터에 액세스 할 수 있기 때문에, 다음과 같은 조작도 간단하게 실시할 수 있습니다.

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.getElementsByClassName('default').length).toBe(1);
});

리액트 테스트 라이브러리의 이면에 있는 철학을 이해하고 리액트 테스트 라이브러리로 무엇을 할 수 있는지 이해할 필요가 있습니다.

리액트 테스트 라이브러리의 목적은 테스트에 컴포넌트의 구현에 대한 자세한 내용을 포함하지 않고 테스트 작성에 중점을 두는 것입니다.

따라서 클래스 이름별로 요소를 쿼리하는 것은 구현 세부사항을 포함하므로 react-testing-library 원칙과 일치하지 않습니다.클래스명은 요소의 실제 구현 세부사항이며 최종 사용자에게 표시되지 않으며 요소의 라이프사이클에서 언제든지 변경될 수 있습니다.

따라서 사용자가 볼 수 없는 것 또는 언제든지 변경될 수 있는 것으로 요소를 검색하는 대신 텍스트, 라벨 또는 데이터 ID와 같은 요소의 라이프 사이클에서 일정하게 유지되는 무언가를 사용하여 검색해 보십시오.

따라서 질문에 답하기 위해 클래스 이름을 테스트하는 것은 권장되지 않으므로 react-testing-library에서는 테스트 할 수 없습니다.효소 또는 반응 영역 테스트 유틸리티와 같은 다른 테스트 라이브러리를 사용해 보십시오.

testing-library/jest-dom 커스텀매처를 사용할 수 있습니다.

@testing-library/jest-dom 라이브러리는 농담을 확장하기 위해 사용할 수 있는 일련의 커스텀재스트 매처를 제공합니다.이를 통해 테스트 내용이 보다 명확해지고 읽기 쉬우며 유지보수가 쉬워집니다.

https://github.com/testing-library/jest-dom#tohaveclass

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)

    expect(container.firstChild).toHaveClass('class-you-are-testing') 
})

이것은, 글로벌하게 설정할 수 있습니다.setupTest.js파일

import '@testing-library/jest-dom/extend-expect';
import 'jest-axe/extend-expect';
// etc

를 사용해 주세요.toHaveClassJest에서.논리를 추가할 필요가 없습니다.

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild).toHaveClass(add you className);
//You Can Also You Screen Instead Of Using Container Container Not Recommended To Use As Documentation Said
    expect(screen.getByRole('button')).toHaveClass(add you className)
})

joke DOM에서 HaveClass를 사용할 수 있습니다.

it('renders textinput with optional classes', () => {
  const { container } = render(<TextArea {...props} className='class1' />)
  expect(container.children[1]).toHaveClass('class1')
})

이와 같은 대응을 파괴하는 것을 잊지 마십시오.{container}기본적으로 리액트 테스트 라이브러리는 div를 생성하고 해당 div를 visor에 추가합니다.document.body여기서 React 컴포넌트가 렌더링됩니다.자신의 것을 제공하는 경우HTMLElement컨테이너는 이 옵션을 통해 추가되지 않습니다.document.body자동으로.

    // Link.react.test.js
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import App from './../../src/App'
describe('React', () => {
  it('className', () => {
    const renderer = new ShallowRenderer();
    renderer.render(<App />);
    const result = renderer.getRenderOutput();
    expect(result.props.className.split(' ').includes('welcome-framework')).toBe(true);
  });
});

언급URL : https://stackoverflow.com/questions/53389956/how-to-test-a-classname-with-the-jest-and-react-testing-library