Props/ State - 5

Button 테스트

App.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

describe('<App />', () => {
  it('renders component correctly', () => {
  });
});

 

Button/index.test.tsx

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import 'jest-styled-components';

import { Input } from './index';

describe('<Input />', () => {
    it('renders component correctly', () => {
        const { container } = render(<Input value="default value" />);

        const input = screen.getByDisplayValue('default value');
        expect(input).toBeInTheDocument();

        //expect(container).toMatchSnapshot();
    });

    it('renders placeholder correctly', () => {
        render(<Input placeholder="default placeholder" />);

        const input = screen.getByPlaceholderText('default placeholder');
        expect(input).toBeInTheDocument();
    });

    it('changes the data', () => {
        render(<Input placeholder="default placeholder" />);

        const input = screen.getByPlaceholderText('default placeholder') as HTMLInputElement;
        fireEvent.change(input, { target: { value: 'study react' } });
        expect(input.value).toBe('study react');
    });
});

---

export const Button = ({
        label,
        backgroundColor = '#304FFE',
        hoverColor = '#1E40FF',
        onClick
    } : Props) => {
    return (
        <Container backgroundColor={backgroundColor} hoverColor={hoverColor}
                    onClick={onClick}>
            <Label>{label}</Label>
        </Container>
    );
}

jest-styled-components 는 toHaveStyleRule 이라는 Matcher를 추가로 제공하며, styled-components 를 좀 더 자세히 테스트할 수 있게 도와준다.

import 'jest-styled-components';

 

render 함수를 사용하여 Button 컴포넌트를 렌더링한다.

screen.getByText를 사용하여 Button 컴포넌트의 필수 Props인 label의 설정한 값으로 Button 컴포넌트를 찾고 이렇게 찾은 Button 컴포넌트를 toBeInTheDocument를 사용하여 화면에 표시되어 있는지 확인한다.

const { container } = render(<Button label="Button Test" />);

const label = screen.getByText('Button Test');
expect(label).toBeInTheDocument();

 

여기서 label.parentElement 를 사용하여 Label 컴포넌트의 부모요소인 Container 컴포넌트에 접근하여 background-color와 hoverColor가 설정이 되어있는지 확인하기 위해 toHaveStyleRule를 사용한다.

const parent = label.parentElement;
expect(parent).toHaveStyleRule('background-color', '#304FFE');
expect(parent).toHaveStyleRule('background-color', '#1E40FF', {
	modifier: ':hover',
});

 

아래 코드는 초기값이 아닌 임의값을 backgroundColor와 hoverColor에 넣었을때 제대로 동작하는지에 대한 테스트 코드이다.

it('changes backgroundColor and hoverColor Props', () => {
        const backgroundColor = '#FF1744';
        const hoverColor = '#F01440';
        render(
            <Button label="Button Test" backgroundColor={backgroundColor} hoverColor={hoverColor} />,
        );

        const parent = screen.getByText('Button Test').parentElement;
        expect(parent).toHaveStyleRule('background-color', backgroundColor);
        expect(parent).toHaveStyleRule('background-color', hoverColor, {
            modifier: ':hover',
        });
    });

 

Button 컴포넌트의 onClick 이벤트에는 사실 어떤 함수가 연결될지 알 수 가 없다. Jest에서는 이처럼 이벤트를 통해 함수가 호출되는지를 확인하기 위해 모의 함수(Mocking functions)를 사용한다. 사용자가 행하는 특정 이벤트를 다룰 수 있도록 fireEvent라는 기능을 사용한다.

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

it('clicks the button', () => {
        const handleClick = jest.fn();
        render(<Button label="Button Test" onClick={handleClick} />);

        const label = screen.getByText('Button Test');
        expect(handleClick).toHaveBeenCalledTimes(0);
        fireEvent.click(label);
        expect(handleClick).toHaveBeenCalledTimes(1);
    });

 

Jest의 모의 함수인 jest.fn()를 사용하여 handleClick 변수를 선언.

const handleClick = jest.fn();
render(<Button label="Button Test" onClick={handleClick} />);

 

toHaveBeenCalledTimes 함수를 사용하여 우리가 만든 모의 함수가 호출되었는지를 확인한다.

const label = screen.getByText('Button Test');
expect(handleClick).toHaveBeenCalledTimes(0);
fireEvent.click(label);
expect(handleClick).toHaveBeenCalledTimes(1);

 

결과