入力が数値のみを受け入れる場合はテストを反応させます

Question

テストを作成するためにreactテストライブラリを使用しています。

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

テストに合格しましたが、なぜですか？テキストではなく数値のタイプで入力を作成したので、テストに合格しないと思いますか？タイプ番号で入力を確認するにはどうすればよいですか？

Answer 1

これはWebAPIが原因です。Reactは内部でWebAPIと連携し、WebAPIreact-testing-libraryを使用してテストを実行します。

expect(h1).toHaveTextContent('123')h1のtextContentプロパティをチェックしますstring。これはです。

inputのvalueプロパティについても同じです。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つは次のとおりです。

これは一般に、ユーザーが使用する方法でアプリケーションコンポーネントをテストするのに役立ちます。

ユーザーは画面上の数字をテキストとして表示し、「タイプ」を気にしません。したがって、ユーザーに表示されるテキストに基づいてテストを作成することは理にかなっています。たとえば、一部のアプリケーション1,234,567では1234567、の代わりに、数値が美しくフォーマットされているかどうかをテストすることができます。