React-testing-library: Can you rename `data-testid` to `data-test-id` because I am OCD?

[bpkennedy]

Not sure why we can't hyphenate the whole thing is all. 😄

[gnapse]

Please see kentcdodds/dom-testing-library#76

[6ewis]

How about we allow for both data-testid (and eventually deprecate it) and 'data-test-id`(which is more intuitive)

[kentcdodds]

Sorry, no. We're going to stick with what we have. You can create a custom query and pass it as an argument to dom-testing-library and use that one instead if you want. Thanks anyway!

[Gpx]

You can create a custom query and pass it as an argument to dom-testing-library and use that one instead if you want.

Would it be OK if I add a section in the README explaining how to make such a query?

[kentcdodds]

Yes, please do @Gpx!

[ankitsinghaniyaz]

The example on the readme doesn't seem to work.

// test-utils.js
import {render, queryHelpers} from 'react-testing-library'

export const queryByTestId = queryHelpers.queryByAttribute.bind(
  null,
  'data-test-id',
)
export const queryAllByTestId = queryHelpers.queryAllByAttribute.bind(
  null,
  'data-test-id',
)

export function getAllByTestId(container, id, ...rest) {
  const els = queryAllByTestId(container, id, ...rest)
  if (!els.length) {
    throw getElementError(
      `Unable to find an element by: [data-test-id="${id}"]`,
      container,
    )
  }
  return els
}

export function getByTestId(...args) {
  return queryHelpers.firstResultOrNull(getAllByTestId, ...args)
}

const customRender = (node, ...options) => {
  const utils = render(node, ...options)

  return {
    ...utils,
    getByTestId: getByTestId.bind(container),
    getAllByTestId: getAllByTestId.bind(container),
    queryByTestId: queryByTestId.bind(container),
    queryAllByTestId: queryAllByTestId.bind(container),
  }
}

// re-export everything
export * from 'react-testing-library'

// override render method
export {customRender as render}

Here are the issues that I see:

1. container is not defined in the customRender method
2. At runtime I get an error saying TypeError: container.querySelectorAll is not a function for line 17
   const els = queryAllByTestId(container, id, ...rest)
3. getElementError is not defined

[alexkrolick]

Woops

• change node to container
• should be queryHelpers.getElementError

PR appreciated

[ankitsinghaniyaz]

Cool, I'll create a PR for this.

[eran-co]

the ability has been added to the library, see here