입력이 숫자 만 허용하는 경우 반응 테스트

Nov 22 2020

내 테스트를 만들기 위해 반응 테스트 라이브러리를 사용하고 있습니다.

import React, {useState} from 'react';

const Input = () => {
    const [state, setState] = useState(0);

    const onChange = (e) => {
        setState(e.target.value)
    };

    return (
        <div>
            <h1>{state}</h1>
            <input placeholder='type' type="number" value={state} onChange={onChange}/>
        </div>
    );
};

export default Input;

내 테스트 :

import Input from "./Input";
import { render, fireEvent } from '@testing-library/react'


describe('test if render', ()=> {
    test('check render text', ()=> {
        const { getByPlaceholderText, getByRole } = render(<Input />);
        const input = getByPlaceholderText('type');
        const h1 = getByRole('heading', {level: 1});
        fireEvent.change(input, { target: { value: "123" } });
        expect(h1).toHaveTextContent('123')
    });
    test('check not render text', ()=> {
        const { getByPlaceholderText, getByRole } = render(<Input />);
        const input = getByPlaceholderText('type');
        const h1 = getByRole('heading', {level: 1});
        fireEvent.change(input, { target: { value: "" } });
        expect(h1).toHaveTextContent('')
    })
});

이제 테스트를 통과했지만 그 이유는 무엇입니까? 텍스트가 아닌 숫자 유형으로 입력을 작성 했으므로 테스트가 통과되지 않을 것으로 예상합니까? 유형 번호로 입력을 확인하는 방법은 무엇입니까?

답변

3 ShuheiKagawa Nov 22 2020 at 07:44

웹 API 때문입니다. React는 내부적으로 Web API와 함께 작동하며 Web API를 react-testing-library사용하여 테스트를 실행합니다.

expect(h1).toHaveTextContent('123')h1textContent속성을 확인합니다 string.

inputvalue재산도 마찬가지입니다 . HTMLInputElement의 value속성은 항상 string. 나는 그렇게 확신하는 이유 100 % 아니지만, 그것은 나에게 의미가 HTMLInputElement.value항상이다 string상관없이 type.

    const onChange = (e) => {
        setState(e.target.value) // e.target.value is already a string. So, the state gets a string instead of a number here.
    };

당신이 정말 원한다면 number, HTMLInputElement라는 또 다른 특성이 valueAsNumber숫자입니다.

valueAsNumber

double : 다음 중 하나로 해석되는 요소의 값을 순서대로 반환합니다.

  • 시간 가치
  • 숫자
  • 변환이 불가능한 경우 NaN

그런데 테스트 라이브러리의 기본 원칙 중 하나 는 다음과 같습니다.

일반적으로 사용자가 사용하는 방식으로 응용 프로그램 구성 요소를 테스트하는 데 유용합니다.

사용자는 화면에서 숫자를 텍스트로보고 "유형"을 신경 쓰지 않습니다. 따라서 사용자가 보는 텍스트를 기반으로 테스트를 작성하는 것이 합리적입니다. 예를 들어, 일부 응용 프로그램 1,234,5671234567경우 대신 ,과 같이 숫자의 형식이 아름답게 지정되었는지 테스트 할 수 있습니다 .