Support escaped characters in selectors

Edit from maintainers: this issue was repurposed, see https://github.com/airbnb/enzyme/issues/1218#issuecomment-334489966

Settings

• React v16
• Enzyme v3

When i have a component which has a className prop with special character / or @ , it doesnt select anything. I feel enzyme breaks and doesn’t continue with the lines after this selector.

Example

const sampleComponent = () => (
    <div className="u-width-1/2@small">
        Something here
    </div>
);

If I have the above component and if I want to select the div containing u-width-1/2@small I tried

const component = shallow(<sampleComponent />);
component.find('.u-width-1/2@small') // This line seems to fail due to error in selector
/* Anything after this doesnt execute */

[ljharb]

That’s not a valid class name - that won’t work in the browser either.

[aaronthomas]

I agree with @yash0087 and @coderas, a class with an @ symbol (or anything other than whitespace for that matter) is indeed a valid class name.

It’s worth noting the class names are defined by the HTML spec rather than CSS – though the CSS spec defines what is a valid class selector as per @yash0087’s link above. The HTML5 spec clearly states that classes are simply “a set of space-separated tokens”, which have no restrictions other than whitespace characters: https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#classes

In addition, the argument that document.querySelector does not allow those characters is also false. document.querySelector uses the Selectors API, which explicitly states that the same escaping rules as CSS should be applied for special characters: https://drafts.csswg.org/selectors-4/#case-sensitive.