Support for custom selectors

[JasonNutmeg]

Is your feature request related to a problem? Please describe. We use a custom attribute to target DOM elements for testing (as described in Kent's article).

In our spec files, we select elements using code like:

const productCheckbox = '[data-qa="product-checkbox"]';

It gets very redundant defining the data-qa part of the selector each time, when the only variable is the value in the attribute.

Describe the solution you'd like It would be amazing if there was a way to create custom selectors that are exposed by the ShallowWrapper. Protractor provide this functionality.

Describe alternatives you've considered The only alternative I've thought about is creating a simple function that provides the functionality of building the data-qa selector, but it would be far more readable if the selector came as part of the ShallowWrapper because it would behave in the same way as the built-in selectors.

Additional context Here is a snippet of code that shows example usage of such a custom selector:

let wrapper;

beforeEach(() => {
  wrapper = shallow(<ProductComponent />);
});

it('should have the product checkbox in the DOM', () => {
  expect(wrapper.qa('product-checkbox')).toExist();
});

[ljharb]

As far as a method for data- attributes specifically - this is "test markers", which is a testing approach that was popular 5-10 years ago, and turned out to be brittle and hard to maintain, and as such was deemed a bad practice. It's starting to pop up again, but I don't think it'd be a good idea for enzyme to enshrine something that remains a poor choice.

[JasonNutmeg]

Hey @ljharb! Thanks for taking the time to read and respond to my issue. 🙂

In my experience of using data- for selecting elements in tests, I haven't found it to be brittle or hard to maintain. For me, it's the most resilient approach for finding the right element in the DOM and it's been more future proof that other methods that I've seen.

As well as Kent's article (that I linked to the in the OP), Cypress.io encourage the use of data- in their 'Best practices' guide.

However, I'd be delighted to learn about alternative and better practices for selecting elements in tests. 🙂

Whether you agree with the use of test markers or not, I still think allowing Enzyme users the flexibility to add their own selectors - that get merged into the EnzymeWrapper - would be a nice and useful feature.

[ljharb]

Since you’re mainly asking for sugar over existing functionality (ie, you can already use data- selectors normally, as you indicated), I’m happy to leave this open, but it doesn’t seem compelling right now.

[hepiyellow]

@ljharb Is wrapper.prop('data-something') supposed to get the value of a data prop? (Full DOM rendering)

I couldn't find anything in the docs about data- attributes.

[ljharb]

@hepiyellow yes, just the same as any other prop - data attributes aren't treated specially by react or by the browser (except in looking them up via the data API)