Jest＆React测试库：如何访问getAllByText的元素

如何解决Jest＆React测试库：如何访问getAllByText的元素

我尝试为我的应用程序的日期选择器组件编写一个单元测试。我不知道如何访问DateRangePicker的getAllByText（）中的开始日期和结束日期元素。

这是日期选择器组件

export const DatePicker = (props) => (
  <Stack direction="row" spacing="2">
    <Field
      name={props.datePickerName + 'Day'}
      label={<Trans id="whenDidItStart.startDay" />}
      component={TextInput}
      //group={props.group}
      w={70}
      maxLength="2"
    />
    <Field
      name={props.datePickerName + 'Month'}
      label={<Trans id="whenDidItStart.startMonth" />}
      component={TextInput}
      //group={props.group}
      w={70}
      maxLength="2"
    />
    <Field
      name={props.datePickerName + 'Year'}
      label={<Trans id="whenDidItStart.startYear" />}
      component={TextInput}
      //group={props.group}
      w={110}
      maxLength="4"
    />
  </Stack>
)
export const SingleDatePicker = (props) => {
  return (
    <Stack spacing={4} pb="5">
      <Field
        name={props.name}
        datePickerName={props.datePickerName}
        group={props.group}
        label={props.label}
        helperText={props.helperText}
        component={DatePicker}
      />
    </Stack>
  )
}
export const DateRangePicker = (props) => {
  return (
    <React.Fragment>
      <SingleDatePicker
        name={props.name + 'Start'}
        datePickerName="start"
        group={props.group}
        label={props.startLabel}
        helperText={props.helperText}
      />
      <SingleDatePicker
        name={props.name + 'End'}
        datePickerName="end"
        group={props.group}
        label={props.endLabel}
        helperText={props.helperText}
      />
    </React.Fragment>
  )
}

这是单元测试

describe('<DatePicker />',() => {
  afterEach(cleanup)
  it('properly renders DatePicker components',() => {
    const submitMock = jest.fn()
    const { getAllByText,getByRole } = render(
      <I18nProvider i18n={i18n}>
        <ThemeProvider theme={canada}>
          <Form
            initialValues=""
            onSubmit={submitMock}
            render={() => <DatePicker datePickerName="test" />}
          />
        </ThemeProvider>
      </I18nProvider>,)

    screen.debug()
    const testDay = getAllByText(/whenDidItStart.startDay/)
    expect(testDay).toHaveLength(1)

    const testMonth = getAllByText(/whenDidItStart.startMonth/)
    expect(testMonth).toHaveLength(1)

    const testYear = getAllByText(/whenDidItStart.startYear/)
    expect(testYear).toHaveLength(1)
  })
  it('properly renders DateRangePicker components',getByRole } = render(
      <I18nProvider i18n={i18n}>
        <ThemeProvider theme={canada}>
          <Form
            initialValues=""
            onSubmit={submitMock}
            render={() => <DateRangePicker label="dateRangePickerTest" name="dateRangePickerTest" />}
          />
        </ThemeProvider>
      </I18nProvider>,)
    const testStartDate = getAllByText(/***start day****/)
    expect(testStartDate).toHaveLength(1)

    const testEndDate = getAllByText(/***end day***/)
    expect(testEndDate).toHaveLength(1)
  })
})

我尝试过getAllByText（/dateRangePickerTest.start/）和

getAllByText(/dateRangePickerTest.end/)

但开玩笑却给出了错误：>找不到具有文本/dateRangePickerTest.start/的元素。