Jest, Enzyme 测试同一个子组件的多次出现答案

【问题标题】：Jest, Enzyme Test multiple occurrence of the same child componentJest, Enzyme 测试同一个子组件的多次出现
【发布时间】：2020-09-22 11:36:14
【问题描述】：

我正在尝试测试模拟的内容在我的测试中是否正确显示。其中两个使用 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)>,

【问题讨论】：

试试expect(H1TagWrapper.first().getElements()).toBe(headline)和expect(H1TagWrapper.last().getElements()).toBe(heading2)
expect(H1TagWrapper.first().text()).toBe(headline) expect(H1TagWrapper.last().text()).toBe(heading2) 有效！ .getElements() 也返回组件包装器。我想知道是否有办法做多个（超过 2 个），因为这个解决方案不适用于检查超过 2 个项目的测试。

标签： reactjs jestjs enzyme styled-components

【解决方案1】：

基于@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)

【讨论】：