React-bootstrap-typeahead: Tests data-testid is being ignored / not being passed down

[orekav]

Version 5.1.4

Steps to reproduce

// App.tsx
export default () => (
  <Typeahead
    data-testid='search-bar-input'
    placeholder="Test"
    filterBy={() => true}
    autoFocus={true}
    options={[]}
  />
)

Then import that file into a test using react-testing-library

// App.test.tsx
import { render } from '@testing-library/react';
import App from './App';

it('should be focused', async () => {
  const { getByTestId, container } = render(<App />);
  // console.log(container.innerHTML)
  const input = getByTestId('search-bar-input')
  expect(input).toHaveFocus()
});

Expected Behavior

It should pass the test

Actual Behavior

It cannot find search-bar-input
If we do a console.log(container.innerHTML)the result has no 'search-bar-input' at all

[orekav]

Temporally I have added the attribute 'inputProps' with a forced typing

inputProps={{
  'data-testid': 'search-bar-input',
} as InputProps}

[ericgio]

Hi @orekav, the behavior you're seeing is expected. Passing the value via inputProps is an appropriate solution.

[orekav]

Hi @ericgio
I agree but the issue is that I had to lie to Typescript

[ericgio]

the issue is that I had to lie to Typescript

I'm not exactly sure what you mean by this. inputProps accepts an object with arbitrary properties. The TS types are provided by a third-party library, so if you feel there's a mistake with the types, I'd recommend filing an issue or submitting a PR with that repo.

[IAMtheIAM]

Passing inputProps without a type works fine and perfectly for react-testing-library! (or any other testing library like Enzyme)

<Typeahead
    inputProps={{
       'name': 'selectItem',
    }}
 />