如果输入只接受数字,则react测试

IT技术 reactjs react-testing-library
2022-08-01 23:32:22

我正在使用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('')
    })
});

现在测试通过了,但是为什么呢?我刚刚创建了一个输入类型:数字,而不是文本,所以我希望测试不会通过?如何检查带有类型号的输入?

1个回答

这是因为 Web API。React 在底层使用 Web API,并react-testing-library使用 Web API 运行测试。

expect(h1).toHaveTextContent('123')检查h1' 的textContent属性,即 a string

属性也是如此input属性总是一个我不是 100% 确定为什么会这样,但对我来说这总是有意义的,不管.valueHTMLInputElementvaluestringHTMLInputElement.valuestringtype

    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.
    };

如果你真的想要 a numberHTMLInputElement还有另一个属性叫做valueAsNumber,它是一个数字。

valueAsNumber

double:按顺序返回元素的值,解释为下列之一:

  • 时间value
  • 一个号码
  • 如果无法进行转换,则为 NaN

顺便说一句,测试库的指导原则之一是:

它通常对于以用户使用它的方式测试应用程序组件很有用。

用户将屏幕上的数字视为文本,而不关心他们的“类型”。因此,我们根据用户看到的文本编写测试是有道理的。例如,对于某些应用程序,您可能想要测试一个数字是否也具有精美的格式,例如1,234,567代替。1234567