Reagieren Sie auf den Test, wenn die Eingabe nur eine Zahl akzeptiert

Question

Ich verwende die React Testing Library, um meinen Test zu erstellen.

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;

Mein Test:

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

Die Tests sind jetzt bestanden, aber warum? Ich habe gerade eine Eingabe mit dem Typ: Nummer, nicht Text erstellt, also erwarte ich, dass der Test nicht bestanden wird? Wie überprüfe ich eine Eingabe mit der Typennummer?

Answer 1

Es liegt an der Web-API. React arbeitet mit der Web-API unter der Haube und react-testing-libraryführt Tests mit der Web-API aus.

expect(h1).toHaveTextContent('123')prüft die Eigenschaft des h1' textContent, die a ist string.

Es ist das gleiche für input's valueEigentum. HTMLInputElement's valueEigentum ist immer ein string. Ich bin mir nicht 100% sicher, warum es so ist, aber es macht für mich Sinn, dass HTMLInputElement.valuees immer stringunabhängig davon ist 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.
    };

Wenn Sie wirklich eine wollen number, HTMLInputElementhat eine andere Eigenschaft namens valueAsNumber, eine Zahl.

valueAsNumber

double: Gibt den Wert des Elements, der als einer der folgenden interpretiert wird, in der folgenden Reihenfolge zurück:

• Ein Zeitwert
• Eine Zahl
• NaN, wenn eine Umwandlung unmöglich ist

Übrigens ist eines der Leitprinzipien der Testbibliothek :

Es sollte im Allgemeinen nützlich sein, um die Anwendungskomponenten so zu testen, wie der Benutzer sie verwenden würde.

Benutzer sehen Zahlen auf einem Bildschirm als Texte und kümmern sich nicht um ihre "Typen". Daher ist es sinnvoll, dass wir Tests basierend auf Texten schreiben, die Benutzer sehen. Zum Beispiel können Sie testen möchten , ob eine Zahl schön wie gut formatiert ist, wie 1,234,567statt 1234567, für einige Anwendungen.