Testing styled component with enzyme

I got theme defined in the app and the child component contains style like color: ${props => props.theme.options.color};

if i use Enzyme to mount the parent component, it cause TypeError: Cannot read property of undefined

Is there any solution for this issue, i try to setContext(__styled-component__) in the test but it doesn’t work.

[three60five]

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.

[chuanxie]

created a workaround but it might not be the best solution.

const CHANNEL = '__styled-components__';
const broadcast = createBroadcast(themes.dark);

const nodeWithThemeProp = node => {
  return React.cloneElement(node, { [CHANNEL]: broadcast.subscribe });
};

export function mountWithTheme(node, { context, childContextTypes } = {}) {
  return mount(
    nodeWithThemeProp(node),
    {
      context: Object.assign({}, context, {[CHANNEL]: broadcast.subscribe}),
      childContextTypes: Object.assign({}, {[CHANNEL]: createBroadcast(themes.dark).publish}, childContextTypes)
    }
  );
}

now i can get the wrapper component’s state() by using: const wrapper = mountWithTheme(<Component {...props} />);