Enzyme: Failed to Parse data attribute selector

[AB1519]

I am trying to achieve a test case based on data-test attribute but i am getting the following error

Failed to parse selector: [data-test = 'HeaderComponent']

can anyone help me out what is the mistake here

component:

<header data-test = "HeaderComponent">
      <div className ="wrapper" >
              <div className = "heading">
                     <h2 data-test="Title">Learning Jest Testing </h2>
               </div>
        </div>
</header>

Test case:

const setUp = (props = {}) => {
    const component = shallow(<Header {...props} />);
    return component;
}

const findByTestAtrr = (component, attr) =>{
    const wrapper = component.find(`[data-test = '${attr}']`);  //test failing line
    return wrapper;
}

describe('Header Component', () => {

    //call the setUp that is the shallow rendering before each test case
    let component;
    beforeEach(() => {
        component = setUp();
    })

    it('should render without error', () => {
        //testing the component
        const wrapper = findByTestAtrr(component,'HeaderComponent');
        expect(wrapper.length).toBe(1); 
    });

    it('should render the title', () => {
        const wrapper = component.find(`[data-test = 'Title']`);
        expect(wrapper.length).toBe(1);
    })

});

[ljharb]

Remove the spaces around the equals sign; i don’t think that’s valid in querySelector.

[AB1519]

It worked thanks!!