How to get `getElementError` function in Custom Query

[Yama-Tomo]

• @testing-library/dom@7.1.1

I have created custom query using this document.
https://testing-library.com/docs/dom-testing-library/api-helpers#custom-queries
But not found function getElementError in the queryHelpers.

I found the deletion of the declaration in #452.
Is the code below correct to do this?

// Hmmm.. `getConfig` is not exported at the entry point.
const config = require('@testing-library/dom/dist/config')

export function getMyCustomElement(container) {
  ... snip ...
  if (!element) {
    throw config.getConfig().getElementError(`Unable to find an element....`, container)
  }
  ... snip ...
}

[eps1lon]

We have a dedicated section in our docs that explains how to build a custom error: https://testing-library.com/docs/dom-testing-library/api-helpers#custom-queries.

Hope that helps. If you have more questions I would suggest our spectrum.chat

[Yama-Tomo]

@eps1lon My point is that it doesn't work according to the document.
Should I still ask the question there?

[eps1lon]

@Yama-Tomo The few bits you provided do not the documentation. You're importing from dist and using config instead of query helpers. For meaningful help we would need a complete example.

[Yama-Tomo]

@eps1lon I didn't write the origin. I'm sorry.

I wrote a custom query that looks like the following.
(The actual custom query is more complicated, but we want to mention getElementError, so we've omit it.

import * as React from 'react';
import { render, queryHelpers } from '@testing-library/react';

const getMyCustomElement = (container: HTMLElement) => {
  throw queryHelpers.getElementError('throw error test', container);
};

it('example', () => {
  const { container } = render(<div />);
  getMyCustomElement(container);
});

There was an error when I ran the above code
TypeError: _react2.queryHelpers.getElementError is not a function

Next, I tried to dump queryHelpers

const getMyCustomElement = (container: HTMLElement) => {
+ console.log(queryHelpers);
  throw queryHelpers.getElementError('throw error test', container);
};

getElementError wasn't found.

    {
      getMultipleElementsFoundError: [Function: getMultipleElementsFoundError],
      queryAllByAttribute: [Function: queryAllByAttribute],
      queryByAttribute: [Function: queryByAttribute],
      makeSingleQuery: [Function: makeSingleQuery],
      makeGetAllQuery: [Function: makeGetAllQuery],
      makeFindQuery: [Function: makeFindQuery],
      buildQueries: [Function: buildQueries]
    }

[eps1lon]

What version of @testing-library/react and @testing-library/dom do you have installed? You're likely using an older version

[Yama-Tomo]

• @testing-library/dom@7.1.1

@testing-library/react is 10.0.1

I have upgraded testing-library/dom to 7.1.3 and I get the same error.

[eps1lon]

Confirmed in https://codesandbox.io/s/morning-pond-c1mps.

I was confused by the linked guide. I usually use buildQuerie which works fine. In the future please provide a full reproduction.

[Yama-Tomo]

I usually use buildQuerie which works fine.

The functions called by buildQueries gets getElementError via getConfig, so there is no error.

dom-testing-library/src/query-helpers.js

Line 6 in c0a4eb2

return getConfig().getElementError(

dom-testing-library/src/query-helpers.js

Line 58 in c0a4eb2

throw getConfig().getElementError(

[eps1lon]

To be honest I don't know why we would expose this anyway. buildQueries seems like a much better helper. https://testing-library.com/docs/dom-testing-library/api-helpers#custom-queries not only is way toz convoluted for changing the attribute of ByTestId (uses .bind, can be configured now) but also is better suited for implementation by buildQueries.

It seems like we can safely remove that section or should find a better use case for a read of getElementError. Any thoughts?

/cc @testing-library/dom

[Yama-Tomo]

buildQueries seems like a much better helper.

That's certainly true... 😄

For example, I think buildQueries is slightly excessive in the case of a simple case to get a single element.
In that case, it would be useful to be able to call getElementError directly.

const getMyElement = (container) => {
  const selector = '.some > .selector'
  const element = container.querySelector(selector)
  if (!element) {
    throw queryHelpers.getElementError(`Unable to find an element with selector of: ${selector}`, container)
  }
  return element
}

patterns using buildQueries

// raw_selector_queries.js
const [queryBy, getAll, getBy, findAll, findBy] = buildQueries(
  (container, ...rest) => container.querySelectorAll(...rest),
  (_, selector) => `Found multiple elements with selector of: ${selector}`,
  (_, selector) => `Unable to find an element with selector of: ${selector}`,
)

export { queryBy, getAll, getBy, findAll, findBy }

//------------------------------
import { getBy } from './raw_selector_queries'

const getMyElement = (container) => getBy(container, '.some > .selector')

However, if you code is large, a pattern using buildQueries may be preferable as it is DRY.

I don't know why the function that generates the error message should be private, but I will follow your team thoughts! ( it might be better to un export getMultipleElementsFoundError too.

[alexkrolick]

buildQueries is the way to go if you want to generate the full spectrum of query types. Building all of them means fewer surprises for your team because the usage is consistent with whatever they read in the docs. Prior to buildQueries being introduced all the queries were manually written and a few helpers may have been exposed that were meant to make it easier to match the builtins when writing your own.

[eps1lon]

For example, I think buildQueries is slightly excessive in the case of a simple case to get a single element.

This seems like a good thing to me. It's not intended that you build custom queries for one-off cases. It's already hard enough to decide on the correct query to use. If you scale this up too much it'll get out of hand.