Dom-testing-library: Allow for different data-testid formatting in `getByTestId`

[rbrtsmith]

Describe the feature you'd like:

I'd like to introduce the possibility of using React Testing Library at my place of work, however the standard format this is baked into all of our codebases is data-test-id. This is used by teams of testers and it would be almost impossible to get them to change this.
As it stands we cannot use the getByTestId function in our projects.
This is how we'd currently have to use the library:

const product = container.querySelector('[data-test-id="product"]');

Suggested implementation:

I'm not sure how this would be possible to implement in a sensible manner looking at the codebase given that it directly uses the string data-testid that gets passed into querySelector().

Perhaps we could look at some global config as I am sure there are other teams who are formatting data-testids differently.

[kentcdodds]

Hi @rbrtsmith!

This has come up in the past and I said no because I think it's more important to have fewer ways to do the same thing and I _really_ want to avoid adding a configuration capability. I'd prefer to lean on the composability of JavaScript functions.

I do understand that people have different utilities that they'd like to use in their apps and I think every app should have app-specific utilities. This is why I recommend folks setup a testing utilities file. With that in place you could create your own render function which adds/overrides any helpers you can imagine.

// my-app-testing-library.js
import {queryHelpers} from 'dom-testing-library'
import {render} from 'react-testing-library'

function myAppRender(...args) {
  const utils = render(...args)
  return {
    ...utils,
    // you can add/override any utilities here you want
    // and you can use queryHelpers to help do that if you want
  }
}

export * from 'react-testing-library'
export {myAppRender as render}
// and now my-app-testing-library is what you use instead of react-testing-library

[kvrmd]

export * from 'react-testing-library'
export {myAppRender as render}

Returns this error:

TypeError: Cannot set property render of [object Object] which has only a getter

It works when I name the custom render something else, though:

export * from 'react-testing-library'
export {myAppRender}

[alexkrolick]

@kvrmd does this fix it? https://github.com/kentcdodds/react-testing-library/pull/170/files

[kvrmd]

@alexkrolick Thanks. Unfortunately, that doesn't fix it. I think the issue stems from overriding render from the export line: export * from 'react-testing-library'.

[kvrmd]

BTW avoiding es6 modules also works:

const { render, ...rest } = require('react-testing-library')
module.exports = {
  ...rest,
  render: myAppRender
}

[kentcdodds]

I don't think we have anything actionable here. If someone comes up with something then feel free to open a new issue/PR to fix the docs with workarounds/etc.

Thanks.

[eran-co]

the ability has been added to the library, see here