Как протестировать детский текстовый компонент с помощью Jest & Enzyme

Question

Я пишу набор тестов моего приложения React Native, и мне было интересно, как протестировать поверхностный рендеринг дочернего компонента React Native с помощью Jest & Enzyme.

import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import React from 'react'

import NextButton from './NextButton'

describe('NextButton component', () => {
  describe('Rendering', () => {
    let onPress, text, wrapper

    beforeEach(() => {
      onPress = jest.fn()
      text = 'Test button'
      wrapper = shallow(<NextButton onPress={onPress}>{text}</NextButton>)
    })

    test('should render NextButton correctly', () => {
      expect(toJson(wrapper)).toMatchSnapshot()
    })

    test('should have text rendered as a child', () => {
      expect(toJson(wrapper.prop('children'))).toEqual(text)
    })
  })
})

Предыдущий код выдает эту ошибку, Jest не находит children prop.

Expected: "Test button"
Received: undefined

Answer 1

Я думаю, вам просто нужно протестировать text вашего компонента (а не его реквизита), попробуйте:

expect(wrapper.text()).toEqual(text);