unit testing styled component in react

Question

I have a HTML button styled using styled component library and I am writing a unit test for it. The POC code looks like this:

const StyledButtonComponent = () => {
const [testText, setTestText] = React.useState();

const clickHandler = (e) => {
  e.preventDefault();
  setTestText('Lorem Ipsum')
  console.log('Button Clicked!');
}

return (
 <>
    <TestButton onClick={clickHandler} data-test="component-styled-button">
    Click Me!!
    </TestButton>
   <p data-test="text-tag">{testText}</p>
 </>
);
}

Here TestButton is a styled component.

And my unit test code is:

describe('Styled Button Component', () => {
let wrapper;
const setup = () => mount(<StyledButtonComponent />)
const findByAttr = (wrapper, val) => {
   return wrapper.find(`[data-test='${val}']`)
}

beforeEach(() => {
  wrapper = setup();
});

it('should render the styled button component without errors', () => {
  const btnComponent = findByAttr(wrapper, 'component-styled-button');
  expect(btnComponent).toHaveLength(2);
});

it('should allow user to click on the styled button', () => {
  const btnComponent = findByAttr(wrapper, 'component-styled-button');
  btnComponent.simulate('click', { preventDefault() {}})
  const pTag = findByAttr(wrapper, 'text-tag');
  expect(pTag.render().text()).toBe('Lorem Ipsum')
});
});

But for the second test I am getting an error:

Method “simulate” is meant to be run on 1 node. 2 found instead.

So what is the correct way to test components rendered using Styled Component?

@slideshowp2 the look and feel of the button is as per the styles I have mentioned in my Styled Component code for the button — Bijay Singh
– Bijay Singh, Commented Jul 1, 2021 at 5:42

Kevin Moe Myint Myat · Accepted Answer · 2021-07-01 05:15:57Z

3

When you find in a wrapper of EnzymeJS, it will give you back the actual DOM element as well as React Wrapper which wraps it also.

To solve this issue, you can use multiple options. One of them is first().

const btnComponent = findByAttr(wrapper, 'component-styled-button').first();

Reference: https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/first.html

Another one is at(index).

const btnComponent = findByAttr(wrapper, 'component-styled-button').at(0);

Reference: https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/at.html

answered Jul 1, 2021 at 5:15

Kevin Moe Myint Myat

2,1851 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bijay Singh Over a year ago

Thanks @Kevin for your answer. I believe this will also work when I am wrapping my components with <Provider> tag in case of redux

Collectives™ on Stack Overflow

unit testing styled component in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related