find by attribute doesn't work if string has a dot

[ManuelDeLeon]

Given this component:

import React from 'react';
export class Test extends React.Component {
  render() {
    return (
    <div>
      <span data-ex="works"/>
      <span data-ex="doesnt.work"/>
    </div>
    );
  }
}

The method find correctly identifies the first span with a data attribute (no dot in the string) but fails to identify the second one (data attribute has a dot)

import React from 'react';
import { shallow } from 'enzyme';
import { Test } from './Test';

describe("Test", ()=>{
  it("has first span", ()=>{
    const rendered = shallow(<Test />);
    const elements = rendered.find('[data-ex="works"]');
    expect(elements.length).toBe(1); // Success
  })

    it("has second span", ()=>{
    const rendered = shallow(<Test />);
    const elements = rendered.find('[data-ex="doesnt.work"]');
    expect(elements.length).toBe(1); // Fails
  })
})

[ManuelDeLeon]

The problem is with the regex that checks if the selector is compound. It doesn't take into account that attribute values can have the search items inside strings. It also doesn't recognize that names can have dashes and underscores. The solution is to match from the beginning of the selector up to the point where it has a compound marker.

I tried to do a PR but got a whole bunch of errors trying to run the tests in the enzyme project.

The fix is to change Utils.js line 179 from:

export const isCompoundSelector = /([a-z]\.[a-z]|[a-z]\[.*\]|[a-z]#[a-z])/i;

To:

export const isCompoundSelector = /^[\.#]?-?[_a-z]+[_a-z0-9-]*[\.\[#]/i;

[joeduncan]

@ManuelDeLeon i changed the regex to your solution and added more test cases.