(Jest, Enzyme) 컴포넌트 단위, 통합 테스트

State => 단위 테스트 with Jest

import { doIncrement, doDecrement } from './App';

describe('Local State', () => {
  it('should increment the counter in state', () => {
    const state = { counter: 0 };
    const newState = doIncrement(state);

    expect(newState.counter).to.equal(1);
  });

  it('should decrement the counter in state', () => {
    const state = { counter: 0 };
    const newState = doDecrement(state);

    expect(newState.counter).to.equal(-1);
  });
});

Component => 단위 / 통합 테스트 with Enzyme

describe('App Component', () => {
  it('Counter 래퍼를 그려낸다', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find(Counter)).to.have.length(1);
  });

  it('Counter 래퍼에 모든 Prop이 전달되었다', () => {
    const wrapper = shallow(<App />);
    let counterWrapper = wrapper.find(Counter);

    expect(counterWrapper.props().counter).to.equal(0);

    wrapper.setState({ counter: -1 });

    counterWrapper = wrapper.find(Counter);
    expect(counterWrapper.props().counter).to.equal(-1);
  });
});

// Profile Component에 대한 테스트

// Profile.tsx
import React from 'react';

interface Props {
  username: string;
  name: string;
}

const Profile: React.FC<Props> = ({ username, name }: Props) => {
  return (
    <div>
      <b>{username}!</b>&nbsp;
      <span>({name})</span>
    </div>
  );
};

export default Profile;

// Profile.spec.tsx
describe('<Profile />', () => {
  it('matches snapshot', () => {
    const wrapper = mount(<Profile username="Sungdong Jo" name="Doong" />);
    expect(wrapper).toMatchSnapshot();
  });

  it('renders username and name', () => {
    const wrapper = mount(<Profile username="Sungdong Jo" name="Doong" />);

    expect(wrapper.props().username).toBe('Sungdong Jo');
    expect(wrapper.props().name).toBe('Doong');

    const boldElement = wrapper.find('b');
    expect(boldElement.contains('Sungdong Jo')).toBe(true);
    const spanElement = wrapper.find('span');
    expect(spanElement.text()).toBe('(Doong)');
  });
});