Jest & React testing library: how to access element for getAllByText()

I try to write a unit test for a date picker component of my application. I don't know how to access to start day and end day elements inside getAllByText() for DateRangePicker.

Here is the date picker component

export const DatePicker = (props) => ( <Stack direction="row" spacing="2"> <Field name={props.datePickerName + 'Day'} label={<Trans />} component={TextInput} //group={props.group} w={70} maxLength="2" /> <Field name={props.datePickerName + 'Month'} label={<Trans />} component={TextInput} //group={props.group} w={70} maxLength="2" /> <Field name={props.datePickerName + 'Year'} label={<Trans />} 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> )
}

Here is the unit test

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(/) expect(testDay).toHaveLength(1) const testMonth = getAllByText(/) expect(testMonth).toHaveLength(1) const testYear = getAllByText(/) expect(testYear).toHaveLength(1) }) it('properly renders DateRangePicker components', () => { const submitMock = jest.fn() const { getAllByText, 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) })
})

I have tried getAllByText(/) and

getAllByText(/)

but jest gives error: >Unable to find an element with the text: /.

1 Related questions 27 How to pass a an argument to getByText in react Testing Library? 10 Error: Unable to find an element with the text when I try a test with Jest in React 0 getByText fails if I run multiply tests but it works if I run separately Related questions 27 How to pass a an argument to getByText in react Testing Library? 10 Error: Unable to find an element with the text when I try a test with Jest in React 0 getByText fails if I run multiply tests but it works if I run separately 4 How to make queries in Jest test within context of particular element? 0 React Testing - get text inside an element 3 getByText doesn't find the element 31 How to fetch element with 'name' attribute in react-testing-library 11 How to expect a getByText to be false in react testing library? 8 React Testing Library does not find elements using getAllByTestId after initial render 5 React testing library, how to get text from element Load 7 more related questions Show fewer related questions Sorted by: Reset to default

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.