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

【问题标题】：Enzyme Styledcomponents shallow rendering returning `WithTheme(Component) `Enzyme Styledcomponents 浅渲染返回 `WithTheme(Component)`
【发布时间】：2020-03-12 18:44:14
【问题描述】：

这是一个我正在尝试快照测试的简单组件

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>
    )
}

这是我的 Jest 测试用例

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());
})

在输出中我得到了这个

  <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)>

我不太清楚为什么我得到的是WithTheme(Component) 而不是Badge 或Img。我确实意识到这些组件是样式化的组件，但是浅层只是假设渲染一层深，对吗？

【问题讨论】：

标签： reactjs jestjs enzyme styled-components snapshot

【解决方案1】：

首先，你的树被渲染了一层，这仍然是正确的。

其次，它是关于enzyme 实现像.debug()（以及enzyme-to-json）这样的人类可读形式输出什么组件的方式。它只使用displayName 属性，对于像withTheme 这样的HOC，您必须手动指定它：

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

在他们的回购团队的成员中提到their Babel plugin（可能）会自动为您执行此操作。但说实话，除了文件名之外，我没有得到它可以用于displayName 的东西。还是试试吧。

否则withTheme 无法知道您将使用什么变量名称。

【讨论】：

这就是问题所在。我使用的第三方库没有 displayName