Question

这是我要进行快照测试的简单组件

puts my_hash["Product One B"[2]] # => product_one_price_3

这是我的Jest测试用例

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

在输出中我得到了

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。我确实意识到这些组件是样式化的组件，但是浅层只是想将一层深深地呈现出来，对吗？

Answer 1

首先，您的树被渲染为一个深度，这仍然是正确的。

第二，这是关于enzyme实现以.debug()之类的人类可读形式（以及enzyme-to-json也是）所要输出的组件的方式。它仅使用displayName属性，对于withTheme这样的HOC，您必须手动指定它：

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

在其回购团队中，成员提到their Babel plugin（可能）会自动为您执行此操作。但是说实话，我并没有获得displayName可以用于文件名的任何信息。仍然尝试一下。

没有withTheme，您将无法知道您将使用什么变量名。

酶样式的组件浅层渲染，返回“ WithTheme（Component）”

1 个答案: