React-testing：无法检测到 DatePicker 字段以启动更改

Question

我有一个使用 react-datepicker 包的组件。

我写信是为了编写一个单元测试，它将编辑日期，然后运行一些逻辑。但是，我无法检测到我可以使用 userEvent.type() 更改的字段。我尝试过使用 getByText、getByRole、getAllByText。

Form.tsx

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import { Form } from 'react-bootstrap';
import "react-datepicker/dist/react-datepicker.css";

const Form = () => {
    const [data, setData] = useState({ date1: new Date(), date2: new Date() })
    return (
        <div>
            <Form>
                ...some other fields
                <Form.Group controlId="date1">
                    <Form.Label>Date1</Form.Label>
                    <DatePicker name='date1'selected={data.date1} onChange={(date: Date) => setData({...data, date1: date})}
                </Form.Group>

                <Form.Group controlId="date2">
                    <Form.Label>Date2</Form.Label>
                    <DatePicker name='date2' selected={data.date2} onChange={(date: Date) => setData({...data, date2: date})}
                </Form.Group>
                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
        </div>
    )
}

export default Form

Form.test.tsx

import React from 'react';
import Form from './Form';
import {render} from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Form Component', () => {
    it('able to change the date', () => {
        const { getByRole } = render(<Form/>)
        const date1Field = getByRole('textbox', { name: /date1/i })

        act(() => userEvent.type(date1Field, '01/01/1990'))

        ... any other action to submit the form
    })
})

但是，我的终端向我显示，这两个日期都相同，但无法检测到输入字段：

TestingLibraryElementError: Unable to find an accessible element with the role"textbox" and name "/date1/i"

textbox: 

Name=""
<input
    class=''
    name='date1'
    type='text'
    value='05/23/2021'
/>

Name=""
<input
    class=''
    name='date2'
    type='text'
    value='05/23/2021'
/>

Answer 1

issue with the library itself 无法将任何 ARIA 道具传递到 react-datepicker 中的日期选择器。

使用您提到的其他库 react-day-picker 可以将 props 传递到输入并设置 aria 标签。

import DayPickerInput from 'react-day-picker/DayPickerInput';

<DayPickerInput  inputProps={{'aria-label':'Date input 2'}} />

沙盒：https://codesandbox.io/s/react-day-picker-examplesinput-forked-lj8pp

Answer 2

对于正在寻找我已采用 Jonathan S. answer 的解决方案的任何人，

Form.tsx

import React, { useState } from 'react';
import DayPickerInput from "react-datepicker/DayPickerInput";
import { Form } from 'react-bootstrap';
import "react-day-picker/lib/style.css";

const Form = () => {
    const [data, setData] = useState({ date1: new Date(), date2: new Date() })
    return (
        <div>
            <Form>
                ...some other fields
                <Form.Group controlId="date1">
                    <Form.Label>Date1</Form.Label>
                    <DayPickerInput inputProps={{ 'aria-label': 'date1' }} value={data.date1} onChange={(date: Date) => setData({...data, date1: date})}/>
                </Form.Group>

                <Form.Group controlId="date2">
                    <Form.Label>Date2</Form.Label>
                    <DayPickerInput inputProps={{ 'aria-label': 'date2' }} value={data.date2} onChange={(date: Date) => setData({...data, date2: date})}/>
                </Form.Group>
                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
        </div>
    )
}

export default Form

Form.test.tsx

import React from 'react';
import Form from './Form';
import {render} from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Form Component', () => {
    it('able to change the date', () => {
        const { getByLabelText } = render(<Form/>)
        let date1Field = getByLabelText('date1') as HTMLInputElement
        
        // Selects your default value of the date field
        date1Field.setSelectRange(0, date1Field.value.length)
        // Replaces it
        userEvent.type(date1Field, '1990-01-01')
       
        ... any other action to submit the form
    })
})

Answer 3

可能不需要，但以防万一，您可以传递道具 placeholderText='some text' 然后使用 screen.getByPlaceholderText('some text');

获取输入

React-testing：无法检测到 DatePicker 字段以启动更改

React-testing: unable to detect DatePicker field to initiate change

unit-testing

reactjs

react-testing-library