React测试:无法检测DatePicker字段以启动更改

Question

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

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

表格.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

库本身存在问题，无法将任何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.答案的解决方案的人，

表格.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

可能不需要它，但在这种情况下，您可以传递一个prop-placeholderText="some-text"，然后使用screen.getByPlaceholderText("some-text'(获取输入；

Answer 4

试试这个解决方案，它非常适合我

const startDate = await container.find('.ant-picker-input input').first();
await startDate.simulate('mousedown');
await waitFor(async () => {
await container.update();
const dateChart = await container.find('.ant-picker-today-btn');
await dateChart.simulate('click');
});

Answer 5

在尝试了许多解决方案，并尝试了错误之后。

我找到了一个非常适合我的解决方案。

describe('Date Picker Test', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(
<Provider store={store}>
<Router>
<DatePikerFunction />
</Router>
</Provider>,
);
});
it('Date Picker Change', async () => {
const datePicker = await wrapper.find('.ant-picker-input input').first();
await datePicker.simulate('mousedown');
await waitFor(async () => {
await wrapper.update();
const today = await wrapper.find('.ant-picker-cell-today'); // put classname that is used to select the perticular date
const next = today.nextElementSibling;
await next.click();
});
});
});

在这里我找到了今天的日期，然后选择了明天的日期。你可以找到基于类或任何你想要的东西并使用它。

希望它对你也有用。感谢

Answer 6

我找到了一个非常适合我的解决方案。

反应代码：

<DatePicker
id="dob"
placeholderText='Date of Birth'
selected={dateofBirth}
onChange={(date: Date): void => {setDateofBirth(date)}}
popperProps={{ strategy: 'fixed' }}
dateFormat="dd-MM-yyyy"
/>

测试用例代码：

it('fireEvent onchange of Date of Birth', async () => {
const props: LoginProps = {
dateofBirth: new Date(),
setDateofBirth: () => { },
setUniqueRefNumber: () => { },
showErrorMessage: "yes",
}
render(<LoginScreen {...props} />);
const dob = screen.getByPlaceholderText('Date of Birth')
fireEvent.change(dob, { target: { value: new Date() } })
await waitFor(() => {
expect(dob).toBeEnabled();
});