Jest + Enzyme으로 React 컴포넌트 스타일을 테스트하는 방법

제목: Jest + Enzyme로 React 컴포넌트 스타일 테스트하는 방법

이 튜토리얼에서는 Jest와 Enzyme을 사용하여 React 컴포넌트의 스타일을 효과적으로 테스트하는 방법을 살펴보겠습니다. 특히, 버튼이 클릭될 때 시맨틱 UI React 컴포넌트인 <Header>의 display 속성을 테스트하는 것에 초점을 맞출 것입니다.

문제 이해하기

해결 방법에 대해 자세히 알아가기 전에, 제공된 코드 스니펫을 분석하고 일부 오류를 식별해 봅시다:

• DOM 요소의 style 속성을 사용하여 hidden 속성을 관리하는 것은 React에서 잘못된 방법입니다. hidden 속성을 컴포넌트의 상태로 변경해야 합니다.
• headerStyle은 스타일 객체의 얕은 복사로, 버튼이 클릭되었을 때 업데이트되지 않습니다. 업데이트된 스타일을 가져오려면 요소를 다시 쿼리해야 합니다.
• Jest에서 toHaveProperty 어설션의 구문이 잘못되었습니다. toHaveProperty 여야 합니다.

수정된 접근법

이러한 문제를 해결하고 컴포넌트의 스타일을 성공적으로 테스트하기 위해 다음과 같은 수정을 가할 것입니다:

1. 숨김 속성을 컴포넌트의 상태로 변경합니다.
2. 버튼 클릭을 시뮬레이션한 후에 <Header> 요소를 다시 쿼리하여 업데이트된 스타일을 가져옵니다.
3. 어설션 구문을 .to.have.property에서 .toHaveProperty로 수정합니다.

다음은 수정된 코드입니다:

import React, { Component } from 'react';

function Header(props) {
  return <h1 style={props.style}>Header</h1>;
}

function Button(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

export class TestButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hiding: false };
  }

  render() {
    return (
      <div>
        <Header
          id="please-hide-me"
          style={{
            display: this.state.hiding ? 'none' : '',
          }}
        >
          Please Hide Me
        </Header>
        <Button
          onClick={() => {
            this.setState({
              hiding: !this.state.hiding,
            });
          }}
        >
          Sample Toggle
        </Button>
      </div>
    );
  }
}

유닛 테스트 작성하기

수정된 코드를 가지고 이제 Jest와 Enzyme을 사용하여 유닛 테스트를 작성해 보겠습니다:

import React from 'react';
import { shallow } from 'enzyme';
import { TestButton } from './TestButton';

it('Header의 display 속성을 어설션해야 합니다', () => {
  const wrapper = shallow(<TestButton />);
  const button = wrapper.find('Button');
  const header = wrapper.find('Header');

  expect(header.props().style).toHaveProperty('display', '');
  button.simulate('click');
  const updatedHeader = wrapper.find('Header');

  expect(updatedHeader.props().style).toHaveProperty('display', 'none');
});

결론

이 튜토리얼에서는 원래 코드의 오류를 발견하고 Jest와 Enzyme을 사용하여 React 컴포넌트 스타일을 올바르게 테스트하는 올바른 방법을 구현했습니다. 숨김 속성을 컴포넌트의 상태로 변경하고 스타일 업데이트를 정확하게 쿼리함으로써 정확한 테스트를 보장했습니다. 이제 쉽게 React 컴포넌트의 display 속성을 자신감 있게 테스트할 수 있습니다.

참고 자료 : 

reactjs