Fails to find element with class if className is multiline template literal

[wkillerud]

Hi

I encountered an issue where if an element in a component has a className set using a template literal, and that literal spans over multiple lines, wrapper.find(...) cannot find that element when using shallow(...) or mount(...).

Example component.

import React, { PropTypes } from 'react';

export default function Accordion({ open }) {
    return (
        <div className={`accordion 
            ${open ? 'accordion--open' : ''}`}
        >
            <div className={`accordion__title 
                ${open ? 'accordion__title--open' : ''}`}
            >
                ...
            </div>
            <div className={`accordion__body 
                ${open ? 'accordion__body--open' : ''}`}
            >
                ...
            </div>
        </div>
    );
}

Accordion.propTypes = {
    open: PropTypes.bool.isRequired,
};

React and the render-function in Enzyme handles this just fine - the resulting class attribute is what I expect, given the open property, and wrapper.find(...) can reach the element.

However, when using shallow(...)or mount(...), the element can't be found.

Example test.

import React from 'react';
import { shallow, render } from 'enzyme';
import Accordion from '~/components/Accordion';

describe('Accordion', function (){

    it('renders a title using render()', function (){
        const wrapper = render(<Accordion title="Hello"><span>World</span></Accordion>);
        expect(wrapper.find('.accordion__title').text()).to.equal('Hello'); // Works fine
    });

    it('renders a title using shallow()', function (){
        const wrapper = shallow(<Accordion title="Hello"><span>World</span></Accordion>);
        expect(wrapper.find('.accordion__title').text()).to.equal('Hello'); // Fails since .text() has no element to work with
    });

});

An obvious workaround is to not have the template literals span multiple lines - the test then works just fine. However, the behaviour is unexpected since React and render() handles it just fine - shallow(...) and mount(...) should do as well.

[aweary]

@wkillerud this should be resolved now (#348). Going to close this issue, but you're still having the same issue on 2.3.0 let me know and we can investigate it.