Jest, Enzyme Test multiple occurrence of the same child component

Question

I am trying to test if the content of the mock comes out correctly in my test. Two of it uses a H2Tag component, while the other uses H1Tag Component. I am unable to get the testing right for the H2Tag components, since there is two different strings being tested for.

Is there a way to test multiple occurrence of the same component (with different input props)? Alternatively, is there a better way to achieve this test?

I'm also using Styled Components, so the component name appears slightly different in the 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
    })
  })
})

This is the expected/received results for the current way.

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

Try expect(H1TagWrapper.first().getElements()).toBe(headline) and expect(H1TagWrapper.last().getElements()).toBe(heading2) — Fanchen Bao
expect(H1TagWrapper.first().text()).toBe(headline) expect(H1TagWrapper.last().text()).toBe(heading2) works! .getElements() returns the component wrapper as well. I'm wondering if there's a way to do multiple (more than 2), since this solution wouldn't work for tests that checks more than 2 items. — Tofu Lee

Tofu Lee Tofu Lee · Accepted Answer · 2020-06-04T02:35:48

Building on top of @Fanchen Bao's comment (thank you so much!):

If there are two occurrence of the child component to be tested, using .first() and .last() would work.

If there's more than two occurrence of the child component, e.g. 5 using .at(0)... .at(4) would work too.

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

Jest, Enzyme Test multiple occurrence of the same child component

1 Answers