question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Targeting styled components with enzyme's .find()

See original GitHub issue

When I use styled-components to make “building block” components defined in the same file as the “assembled” component, I am having a really difficult time targeting them in my tests using enzyme’s .find() method.

For example, with this styled-component:

import ImportedComponent from './ImportedComponent';
const Demo = styled.div`
`;
const Label = styled.span`
`;
const Thing = () =>
  <Demo>
    <ImportedComponent />
    <Label />
    <Label /> 
    <Label />
  </Demo>;

If I use an imported styled-component like <ImportedComponent>, I can easily find it like with enzyme like:

describe('<Thing />', () => {
  it('should contain an ImportedComponent', () => {
    const wrapper = shallow(<Thing />);
    const importedComponent = wrapper.find('ImportedComponent');
    expect(importedComponent).to.have.length(1);
  });
});

But I haven’t found an elegant way to find the “building block” components like <Label /> because they can’t be found by the component name as they appear more generically like “<styled.span>”. Is there a way for these “building block” components to appear with their component name like they are when imported? I don’t want to resort to targeting them by html or css as that is more brittle.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

84reactions
camsjamscommented, Jul 23, 2018

This alternative described is to override the default styled component’s displayName:

const MessageText = styled.span`
	& {
		font-weight: bold;
	}
`;

MessageText.displayName = 'MessageText';

In render:

render() {
    return <div>
        <MessageText>Hello World</MessageText>
    </div>;
}

And then in testing: t.equals(wrapper.find('MessageText').children().text(), 'Hello World');

52reactions
jessepinhocommented, Mar 20, 2019

For future readers, you don’t need to use a selector to find a styled component. You can simply import the styled component itself to find it. Modifying the original example to do this:

// Thing.jsx

import ImportedComponent from './ImportedComponent';

const Demo = styled.div`
`;

// Note that this is exported (I personally prefer to put styles in a separate `styles.ts` file)
export const Label = styled.span` 
`;

const Thing = () =>
  <Demo>
    <ImportedComponent />
    <Label />
    <Label /> 
    <Label />
  </Demo>;

export default Thing;

// Thing.test.jsx

import Thing, { Label } from './Thing';

describe('<Thing />', () => {
  it('should contain a Label', () => {
    const wrapper = shallow(<Thing />);
    const label = wrapper.find(Label); // Note: NOT a selector!
    expect(label).to.have.length(1);
  });
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to test a styled-component to have a property with Jest ...
I'm using Jest and Enzyme for testing but I couldn't find any information on how dive into your Enzyme shallow wrapper to check...
Read more >
Finding Styled Components with Enzyme
Making it easy to find styled components with enzyme's .find() ... Finding a styled component using enzyme's .find() can be a bit awkward....
Read more >
API Reference
Read more about how to adapt styling based on props in the Adapting based on props section. The properties that are passed into...
Read more >
Testing React Components with Jest and Enzyme- In Depth
We will find out why and what should be left out of tests. Even more, 100% test coverage does not always ensure that...
Read more >
jest-styled-components - npm Package Health Analysis
Jest utilities for Styled Components For more information about how to use this package see README · Security · Popularity · Maintenance ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found