如果输入只接受数字，则反应测试 [英] React test if input accepts just number

问题描述

我正在使用 React 测试库来创建我的测试.

import React, {useState} from 'react';const 输入 = () =>{const [state, setState] = useState(0);const onChange = (e) =>{setState(e.target.value)};返回 (<div><h1>{state}</h1><input placeholder='type' type="number" value={state} onChange={onChange}/>

);};导出默认输入；

我的测试:

import Input from "./Input";从@testing-library/react"导入 {render, fireEvent}描述('测试是否渲染'，()=> {test('检查渲染文本', ()=> {const { getByPlaceholderText, getByRole } = render(<Input/>);const input = getByPlaceholderText('type');const h1 = getByRole('heading', {level: 1});fireEvent.change(input, { target: { value: "123" } });期望(h1).toHaveTextContent('123')});test('检查不呈现文本', ()=> {const { getByPlaceholderText, getByRole } = render(<Input/>);const input = getByPlaceholderText('type');const h1 = getByRole('heading', {level: 1});fireEvent.change(input, { target: { value: "" } });期望(h1).toHaveTextContent('')})});

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

解决方案

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

expect(h1).toHaveTextContent('123') 检查 h1 的 textContent 属性，它是一个 字符串.

input 的 value 属性也是如此.HTMLInputElement 的value 属性总是一个 string.我不是 100% 确定为什么会这样，但对我来说 HTMLInputElement.value 总是一个 string 而不管 type.

 const onChange = (e) =>{setState(e.target.value)//e.target.value 已经是一个字符串.所以，状态在这里得到一个字符串而不是一个数字.};

如果你真的想要一个 number，HTMLInputElement 还有一个属性叫做 valueAsNumber，它是一个数字.

<块引用>

valueAsNumber

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

• 时间价值
• 一个数字
• NaN，如果无法转换

顺便说一下，测试库的指导原则之一是:

<块引用>

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

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

I am using react testing library to create my test.

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;

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

The tests now are passed, but why? I just crated an input with type: number, not text, so i expect the test not to be passed? How to check an input with type number?

解决方案

It's because of the Web API. React works with Web API under the hood, and react-testing-library runs tests using the Web API.

expect(h1).toHaveTextContent('123') checks the h1's textContent property, which is a string.

It's same for input's value property. HTMLInputElement's value property is always a string. I'm not 100% sure why it's like that, but it makes sense to me that HTMLInputElement.value is always a string regardless of 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.
    };

If you really want a number, HTMLInputElement has another property called valueAsNumber, which is a number.

valueAsNumber

double: Returns the value of the element, interpreted as one of the following, in order:

• A time value
• A number
• NaN if conversion is impossible

By the way, one of the guiding principles of the Testing Library is:

It should be generally useful for testing the application components in the way the user would use it.

Users see numbers on a screen as texts and don't care their "type"s. So, it makes sense that we write tests based on texts that users see. For example, you may want to test if a number is beautifully formatted as well, like 1,234,567 instead of 1234567, for some applications.

这篇关于如果输入只接受数字，则反应测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！