Enzyme: [.find(selector)] Doesn't accept regex for attribute selector

[ympadilha]

Current behavior

I've read the Enzyme selector page and it seems that enzyme supports attribute selectors as regex. My problem is related to that.

I am using mount in my component and trying to find a specific child with a specific string as the final part of the name of a CSS class. There's the code:

const find10thDay = (dayPicker: ReactWrapper) => {
  // return dayPicker.find('.css-1l41ygt-day').at(10);
   return dayPicker.find('[className$="-day"]').at(10);
};

The commented line above works perfectly if I use it instead of the regex. I've tried several other approaches such as:

   return dayPicker.find('[className$=-day]`).at(10);
   return dayPicker.find('[className$=\"-day\"]').at(10);
   return dayPicker.find("[className$='-day']").at(10);

   return dayPicker.find("[class$='-day']").at(10); (and the variations above)

Expected behavior

Regex in attribute selectors should work.

API

• [ ] shallow
• [x] mount
• [ ] render

Version

| library | version
| ------------------- | -------
| enzyme | 3.6.0
| react | ^16.6.1
| react-dom | ^16.6.1
| react-test-renderer | 16.0

Adapter

• [x] enzyme-adapter-react-16

[ljharb]

Where on that page do you see a regex being accepted?

[ljharb]

(We support similar syntax as document.querySelectorAll supports, which isn't regex)

[ljharb]

What does dayPicker.debug() print out?

[ympadilha]

@ljharb

attribute syntax ([href="foo"], [type="text"], and the other attribute selectors listed here.)

Find this text inside the page and then click on the link here.

[ympadilha]

What does dayPicker.debug() print out?

It prints nothing, also I get this error:

Method “simulate” is only meant to be run on a single node. 0 found instead.

Since it doesn't find any nodes.

[ympadilha]

Reading this stackoverflow page I see that it's not actually a regex but an "ends with" matcher.
document.querySelector supports it.

[ljharb]

The test code you're asking about is calling dayPicker.find, i want to know what dayPicker.debug() prints out - before the find, and certainly before any calls on the found wrapper.

[ympadilha]

Oh sorry!

I debugged the dayPicker and here's a sample of the output:

<div className="css-1l41ygt-day " tabIndex={-1} style={[undefined]} role="gridcell" aria-label="Sat 
    Feb 23 2019" aria-disabled={false} aria-selected={false} onClick={[Function]} onKeyDown= 
    {[Function]} (more stuff here)
</div>

There's more HTML of course and the css-1l41ygt-day class appears several times.

[ljharb]

In that case, you'll note the className attribute has a trailing space - so in fact, it does not end with -day, it ends with -day.

[ympadilha]

Can't believe I didn't figure that one out, thanks a lot for the help Jordan, really appreciate that man, I'll close this one.

[nnk1996]

i am facing a similar issue now. i need to find an attribute which starts with the given attribute

<Tabs data-test="base-status-tab" value={selectedTab} onChange={tabChange}>
     <Tab label="A" data-test="status-tab-A" value="A" />
     <Tab label="B" data-test="status-tab-B" value="B" />
     <Tab label="C" data-test="status-tab-C" value="C" />
</Tabs>

For finding I tried

const findMultipleByTestAtrr = (component) => (component.find("[data-test^=status-tab-]"))

But I got the following error

Failed to parse selector: [data-test^=status-tab-]
 at safelyGenerateTokens (node_modules/enzyme/src/selectors.js:68:11)
      at safelyGenerateTokens (node_modules/enzyme/src/selectors.js:395:20)
      at reduceTreeBySelector (node_modules/enzyme/src/selectors.js:457:34)
          at Array.map (<anonymous>)
      at map (node_modules/enzyme/src/selectors.js:457:25)
      at ShallowWrapper.find (node_modules/enzyme/src/ShallowWrapper.js:1006:22)
      at findMultipleByTestAtrr (test/utils/index.js:8:70)
      at Object.<anonymous> (my filename)

component.debug() returned this

  <WithStyles(ForwardRef(Tabs)) data-test="base-status-tab" value="queued" classes={{...}} onChange={[Function: tabChange]} __self={[undefined]} __source={{...}}>
      <WithStyles(ForwardRef(Tab)) label="A" data-test="status-tab-A" value="A" classes={{...}} icon={{...}} __self={[undefined]} __source={{...}} />
      <WithStyles(ForwardRef(Tab)) label="B" data-test="status-tab-B" value="B" classes={{...}} icon={{...}} __self={[undefined]} __source={{...}} />
      <WithStyles(ForwardRef(Tab)) label="C" data-test="status-tab-C" value="C" classes={{...}} icon={{...}} __self={[undefined]} __source={{...}} />
    </WithStyles(ForwardRef(Tabs))>

I tried the same with querySelectorAll here which works fine.
Is there something I am missing here?

API
shallow

Versions
enzyme: 3.10.0
react:16.10.2
react-dom:16.10.2
enzyme-adapter-react-16: 1.15.1
@material-ui/core: 4.5.2

[nnk1996]

Found the issue!!

component.find("[data-test^=status-tab-]")

should actually be
component.find('[data-test^="status-tab-"]')

Don't forget the quotes " around the actual search element