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

在react-datepicker中有一个issue with the library itself，并且不能传入任何ARIA props到datepicker中。

通过使用您提到的另一个库react-day-picker，可以将道具传递到输入并设置唱段标签。

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.答案，

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
    })
})