Props/ State - 6

Input 테스트

 

Input/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');
    });
});

 

Input.tsx 코드

...
interface Props {
    readonly placeholder?: string;
    readonly value?: string;
    readonly onChange?: (text: string) => void;
}
...
export const Input = ({placeholder, value, onChange} : Props) => {
    return (
        <InputBox placeholder={placeholder}
        value={value}
        onChange={(event => {
            if(typeof onChange === 'function'){
                onChange(event.target.value);
            }
        })}
        />
    );
}

 

Input 컴포넌트는 Button 컴포넌트와 다르게 필수 Props가 존재하지 않는다. 따라서 화면에 표시되었는지를 알기 위해 검색할 방법이 없다. 그래서 Input 컴포넌트의 필수가 아닌 Props인 value 값을 설정하고 getByDisplayValue 를 사용하여 찾는다.

const { container } = render(<Input value="default value" />);

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

 

getByPlaceholderText를 통해 Input 컴포넌트를 찾았지만 이렇게 찾은 컴포넌트는 기본적으로 HTMLElement 타입이다. 현재 필요한것은 HTML의 input 태그이므로 as HTMLInputElement로 타입 변환을 한다.

fireEvent.change를 사용하여 Input 컴포넌트에 데이터를 입력하고 입력한 데이터가 실제로 화면에 표시되고 있는지 확인하기 위해 toBe를 사용한다.

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');

 

결과

---

ToDoItem 테스트

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

import { ToDoItem } from './index';

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

        const todoItem = screen.getByText('default value');
        expect(todoItem).toBeInTheDocument();

        const deleteButton = screen.getByText('삭제');
        expect(deleteButton).toBeInTheDocument();
        //expect(container).toMatchSnapshot();
    });

    it('clicks the delete button', () => {
        const handleClick = jest.fn();
        render(<ToDoItem label="default value" onDelete={handleClick} />);

        const deleteButton = screen.getByText('삭제');
        expect(handleClick).toHaveBeenCalledTimes(0);
        fireEvent.click(deleteButton);
        expect(handleClick).toHaveBeenCalledTimes(1);
    });
});

 

결과