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

Question

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

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。我确实意识到这些组件是样式化的组件，但是浅层只是假设渲染一层深对吗？

Answer 1

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

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

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

在他们的 repo 团队成员中提到 their Babel plugin 那（可能）会自动为你做那件事。但说实话，除了文件名之外，我没有得到它可以用于 displayName 的内容。无论如何都试一试。

没有它，withTheme 就无法知道您将要使用的变量名称。

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

Enzyme Styledcomponents shallow rendering returning `WithTheme(Component) `

snapshot

reactjs

jestjs

enzyme

styled-components