Javascript Jest/Ezyme将子组件名称和存根组件混合在一起

目前正在使用Jest和Ezyme为我的顶级组件选择一些元素。使用快照测试，我可以看到我选择元素时渲染的内容。我怎么会注意到，在快照中，一些元素以其组件名称呈现，而另一些元素则被替换为

component

我的顶层组件（注意我剥离并修改了一些代码来解释我的观点）：

从“React”导入React
从“mobx react”导入{observer，inject}
从“./awesome.styl”导入样式
从“../ILOVIPIE/Input”导入{Input}
从“../ilovepie/Button”导入{Button}
从“../ILovie/Title”导入{Title}
从“../ilovepie/Subtitle”导入{Subtitle}
从“./labels”导入{labels}
@观察者
导出默认类.组件{
//一些方法
render（）{
返回(
{labels.title}
{labels.subtitle}
{}}
错误={this.isEmailValid？null:labels.invalidEmail}
label={labels.email}
值={this.email}
/>
{}}
label={labels.password}
值={this.password}
iPassword
/>
{}}
text={labels.signIn}
isDisabled={this.loginDisabled}
isLoading={this.isLoading}
/>
{labels.notMember}


{labels.createAccount}
)
}
}

还有一个简单的测试

import React from 'react'
import { shallow, ShallowWrapper } from 'enzyme'

let wrapper: ShallowWrapper

import Awesome from '.'

describe('<Awesome />', () => {
  beforeEach(() => {
    // Somewhere down the road, how we are exporting React Components is exporting
    // it in a wrapper. Hence we need the `.dive()` to see the actual component
    wrapper = shallow(<Awesome />).dive()

  })

  describe("<Awesome /> 's rendering", () => {
    it('should match HTML Snapshot', () => {
      expect(wrapper).toMatchSnapshot()
    })
  })
)}

从“React”导入React
从“酶”导入{shallow，shallowRapper}
让包装器：浅层振打器
从“.”导入真棒
描述（“”，（）=>{
在每个之前（（）=>{
//在这条路上的某个地方，我们是如何导出React组件的
//因此，我们需要“.dive（）”来查看实际的组件
包装器=浅（）
})
描述（“'s rendering”，（）=>{
它（'应该匹配HTML快照'，（）=>{
expect（wrapper.toMatchSnapshot（））
})
})
)}

使用返回的快照运行此操作：

//Jest快照v1，
导出[`'的呈现应与HTML快照1`]匹配=`
你好！
今天天气真好。
还没有成为会员？


创建一个帐户！
`;

为什么有些组件被重命名为

，而有些组件保留了原来的名称，如

？是因为组件名称与HTML元素密切相关吗？如果是，为什么要更换

按钮

我很想知道这里是否有生长激素问题，或者我是否做错了什么事。

根据，姓名计算如下

type.displayName

->

type.name

->

type

由于自定义组件没有名称，因此快照作为一种类型返回到

组件

解决此问题的一种方法是为组件提供静态
displayName
属性

class Title extends Component {
  static displayName = 'Title';
  ...
}

根据，名称计算如下：
type.displayName
->
type.name
->
type

由于自定义组件没有名称，因此快照作为一种类型返回到
组件

解决此问题的一种方法是为组件提供静态
displayName
属性

class Title extends Component {
  static displayName = 'Title';
  ...
}