title: Jest & React testing library: how to access element for getAllByText()
body: <p>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.</p>
  <p><em>Here is the date picker component</em></p>
  <pre class="lang-js prettyprint-override"><code>export const DatePicker = (props) =&gt; (
    &lt;Stack direction=&quot;row&quot; spacing=&quot;2&quot;&gt;
      &lt;Field
        name={props.datePickerName + 'Day'}
        label={&lt;Trans id=&quot;whenDidItStart.startDay&quot; /&gt;}
        component={TextInput}
        //group={props.group}
        w={70}
        maxLength=&quot;2&quot;
      /&gt;
      &lt;Field
        name={props.datePickerName + 'Month'}
        label={&lt;Trans id=&quot;whenDidItStart.startMonth&quot; /&gt;}
        component={TextInput}
        //group={props.group}
        w={70}
        maxLength=&quot;2&quot;
      /&gt;
      &lt;Field
        name={props.datePickerName + 'Year'}
        label={&lt;Trans id=&quot;whenDidItStart.startYear&quot; /&gt;}
        component={TextInput}
        //group={props.group}
        w={110}
        maxLength=&quot;4&quot;
      /&gt;
    &lt;/Stack&gt;
  )
  export const SingleDatePicker = (props) =&gt; {
    return (
      &lt;Stack spacing={4} pb=&quot;5&quot;&gt;
        &lt;Field
          name={props.name}
          datePickerName={props.datePickerName}
          group={props.group}
          label={props.label}
          helperText={props.helperText}
          component={DatePicker}
        /&gt;
      &lt;/Stack&gt;
    )
  }
  export const DateRangePicker = (props) =&gt; {
    return (
      &lt;React.Fragment&gt;
        &lt;SingleDatePicker
          name={props.name + 'Start'}
          datePickerName=&quot;start&quot;
          group={props.group}
          label={props.startLabel}
          helperText={props.helperText}
        /&gt;
        &lt;SingleDatePicker
          name={props.name + 'End'}
          datePickerName=&quot;end&quot;
          group={props.group}
          label={props.endLabel}
          helperText={props.helperText}
        /&gt;
      &lt;/React.Fragment&gt;
    )
  }
  </code></pre>
  <p><em>Here is the unit test</em></p>
  <pre class="lang-js prettyprint-override"><code>describe('&lt;DatePicker /&gt;', () =&gt; {
    afterEach(cleanup)
    it('properly renders DatePicker components', () =&gt; {
      const submitMock = jest.fn()
      const { getAllByText, getByRole } = render(
        &lt;I18nProvider i18n={i18n}&gt;
          &lt;ThemeProvider theme={canada}&gt;
            &lt;Form
              initialValues=&quot;&quot;
              onSubmit={submitMock}
              render={() =&gt; &lt;DatePicker datePickerName=&quot;test&quot; /&gt;}
            /&gt;
          &lt;/ThemeProvider&gt;
        &lt;/I18nProvider&gt;,
      )
  
      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', () =&gt; {
      const submitMock = jest.fn()
      const { getAllByText, getByRole } = render(
        &lt;I18nProvider i18n={i18n}&gt;
          &lt;ThemeProvider theme={canada}&gt;
            &lt;Form
              initialValues=&quot;&quot;
              onSubmit={submitMock}
              render={() =&gt; &lt;DateRangePicker label=&quot;dateRangePickerTest&quot; name=&quot;dateRangePickerTest&quot; /&gt;}
            /&gt;
          &lt;/ThemeProvider&gt;
        &lt;/I18nProvider&gt;,
  
      )
      const testStartDate = getAllByText(/***start day****/)
      expect(testStartDate).toHaveLength(1)
  
      const testEndDate = getAllByText(/***end day***/)
      expect(testEndDate).toHaveLength(1)
    })
  })
  </code></pre>
  <p>I have tried getAllByText(/dateRangePickerTest.start/) and</p>
  <pre class="lang-js prettyprint-override"><code>getAllByText(/dateRangePickerTest.end/)
  </code></pre>
  <p>but jest gives error: &gt;Unable to find an element with the text: <code>/dateRangePickerTest.start/</code>.</p>