Enzyme Styledcomponents 浅渲染返回 `WithTheme(Component)`

Question

This is a simple component I am trying to snapshot test

import React from 'react'

// snapshot test for this
export default function DogItem(props) {
    const { imageUrl, name, subBreeds } = props
    return (
        <Card title={name} width={350} m={2}>
            <Img src={imageUrl}></Img>
            <Flex mt={2}>
                {subBreeds.map(breed => (
                    <Badge key={breed.name} primary mr={2}>
                        {breed}
                    </Badge>
                ))}
            </Flex>
        </Card>
    )
}

and here is my Jest test case

import DogItem from '../DogItem'
import React from 'react'
import { shallow } from 'enzyme'
it('Renders table with correct attributes', () => {
    let rendered = shallow(
        <DogItem imageUrl="testUrl" name="dog name" subBreeds={[1, 2, 3]} />
    )
    console.log(rendered.debug());
})

In the output I get this

  <Img src="testUrl" />
  <Flex mt={2}>
    <WithTheme(Component) primary={true} mr={2}>
      1
    </WithTheme(Component)>
    <WithTheme(Component) primary={true} mr={2}>
      2
    </WithTheme(Component)>
    <WithTheme(Component) primary={true} mr={2}>
      3
    </WithTheme(Component)>
  </Flex>
</WithTheme(Component)>

I am not quite sure why I am getting WithTheme(Component) instead of Badge or Img . I do realize these components are styled components however shallow is just suppose to render the one level deep right?

Answer 1

First, your tree is rendered one level deep, that's still correct.

Second, it's about way enzyme realizes what component to output for human-readable form like .debug() (and also for enzyme-to-json as well). It just uses displayName property, and for HOCs like withTheme you have to specify it manually:

const Badge = withTheme(...)
Badge.displayName = 'Badge';

In their repo team's member mentionstheir Babel plugin that(probably) will do that for you automatically. But telling the truth I did not get what it can use for displayName alongside just file name. Give it a try anyway.

Without that there is no way for withTheme to know what variable's name you are going to use.