reactjs - Jest, Enzyme 测试同一个子组件的多次出现
问题描述
我正在尝试测试模拟的内容是否在我的测试中正确显示。其中两个使用 H2Tag 组件,而另一个使用 H1Tag 组件。我无法正确测试 H2Tag 组件,因为要测试两个不同的字符串。
有没有办法测试同一组件的多次出现(具有不同的输入道具)?或者,有没有更好的方法来完成这个测试?
我也在使用样式化组件,因此组件名称在 debug() 中看起来略有不同。
const Partner = ({ content }) => {
return (
<ContentWrapper>
<H1Tag>{content.headline}</H1Tag>
<H4Tag>{content.heading1}</H4Tag>
<H1Tag>{content.heading2}</H1Tag>
</ContentWrapper>
)
}
//Partner.test.js
import React from 'react'
import Partner, { H1Tag, H4Tag,} from '../SomePage'
import { shallow } from 'enzyme'
describe('Partner', function () {
beforeAll(() => {
this.mockContent = {
headline: 'Partner',
heading1: 'Hello',
heading2:
'ABC XYZ',
}
})
beforeEach(() => {
this.wrapper = shallow(
<Partner content={this.mockContent} />
)
})
describe('render', () => {
it('shows H1Tags content', () => {
const H1TagWrapper = this.wrapper.find(H1Tag)
const { headline, heading2 } = this.mockContent
// how to test two different elements?
expect(H1TagWrapper.getElements()).toBe([headline, heading2]) //this fails
})
it('shows H4Tag content', () => {
const H4TagWrapper = this.wrapper.find(H4Tag)
expect(H4TagWrapper.text()).toEqual(this.mockContent.heading1) //this works
})
})
})
这是当前方式的预期/收到的结果。
expect(received).toBe(expected) // Object.is equality
- Expected
+ Received
Array [
- "Partner",
- "ABC XYZ",
+ <ForwardRef(PartnerBanner__H1Tag)>
+ Partner
+ </ForwardRef(PartnerBanner__H1Tag)>,
+ <ForwardRef(PartnerBanner__H1Tag)>
+ ABC XYZ
+ </ForwardRef(PartnerBanner__H1Tag)>,
解决方案
基于@Fanchen Bao 的评论(非常感谢!):
如果要测试的子组件出现两次,则使用 .first() 和 .last() 将起作用。
如果子组件出现两次以上,例如 5 使用 .at(0)... .at(4) 也可以。
// these two are the same in this question's context
expect(H1TagWrapper.first().text()).toBe(headline)
expect(H1TagWrapper.last().text()).toBe(heading2)
expect(H1TagWrapper.at(0).text()).toBe(headline)
expect(H1TagWrapper.at(1).text()).toBe(heading2)
推荐阅读
- join - 可以在单程中为内存结构构建 FULL JOIN(不使用 sql!)
- three.js - Three.js中的多遍累积渲染
- r - R中的包装函数
- c++ - “uFlags &= ~CHN_PANNING”命令有什么作用?
- angular - 安装时角度/cli给我错误
- javascript - 单击 popup.html 上的按钮时运行 background.js 文件的简单方法
- jenkins - Jenkinsfile:前一个(仍在运行)阶段的卷曲日志
- c - 为什么我的 C 程序做简单的折旧不起作用?
- sql-server - 使用 VS 2017 数据库项目创建数据库时删除索引时出错
- scala - Spark数据框 - 使用scala将公共字符串的标记替换为每行的列值