Тестирование Jest / Enzyme Class Component с использованием React Suspense и React.lazy дочернего компонента - PullRequest
0 голосов
/ 13 декабря 2018

Поэтому я преобразовал импорт, используемый в компоненте класса, в React.lazy import api и обернул его в тег Suspense.Когда я тестирую этот компонент класса, фермент выдает ошибку "Enzyme Internal Error: unknown node with tag 13".Есть ли способ отрисовки и проверки монтирования загруженного компонента вместо использования поверхностного рендеринга?

Я уже пробовал асинхронное ожидание, пока не решится обещание отложенной загрузки, но это не сработалони то, ни другое:

it('async await mount', () async () => {
  const wrapper = await mount(<Component />)
}

пример кода:

Component.js

import React, { PureComponent, Suspense } from 'react'

const ChildComponent = React.lazy(() => import('../ChildComponent'))

export default class Component extends PureComponent {
  constructor() {
      super()
      this.state = {
          example: null
      }
  }

  doSomething = () => this.setState({
      example: 'example'
  })

  render() {
    return (
      <div>
        <p>Example</p>
        <Suspense fallback={<div>...loading</div>}>
            <ChildComponent 
               example={this.state.example}
               doSomething={this.doSomething}
            />
        </Suspense>
      </div>
    )
  }
}

Component.test.js

import React from 'react'
import renderer from 'react-test-renderer'
import { mount } from 'enzyme'
import Component from '../../Component'

describe('Component', () => {
    // snapshot renders loading and not children
    it('example snapshot of tree', () => {
        const tree = renderer.create(<Component />).toJSON()
        expect(tree).toMatchSnapshot()
    })

    it('example mount test', () => {
        // this test fails and throws error I state above
        const wrapper = mount(<Component />)
        wrapper.setState({ example: 'example' })
        expect(wrapper.state.example).toBe('example')
    })
})

Я читал, что Enzyme еще не поддерживает React 16.6 Suspense API, но я хотел узнать, есть ли еще способ проверить смонтированный, чтобы я мог использовать такие вещи, как simulate и find API от Enzyme.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...