Реактивный ферментный тест - манипулирование DOM с помощью componentDidMount

Question

Я манипулирую DOM с помощью componentDidMount в зависимости от положения элемента. Он отлично работает в React, но я хотел бы создать для этого модульный тест.

По сути, у меня есть контейнер с кучей дочерних элементов, и я хочу добавить класс для переносимых дочерних элементов (не в первом ряду). Я делаю эту логику в componentDidMount.

Как я могу проверить с помощью ферментных юнит-тестов?

Я думал использовать mount, но это не приводит. Есть идеи?

class Container extends Component {
  componentDidMount () {
    this.updateChildren()
  }

  updateChildren () {
    // logic to add a class if element position is different than 1st line
    // calls render again with state update
  }

  ...
}

Юнит-тест:

import React from 'react'
import { mount } from 'enzyme'
import Container from '../Container'

describe('<Container />', () => {
 it('renders and hides second row elements'), () => {
   const container = mount(
   <div style={{ width: 200 }}>
      <Container> ...childrens </Container>
   </div>
   )

   expect(wrapper.render()).toMatchSnapshot()
 })
})

Answer 1

ComponentDidMount похож на метод в вашем классе.

Таким образом, вы можете напрямую вызывать метод в своем модульном тесте следующим образом

wrapper = shallow(<Your Component />);

// call the method
wrapper.instance().componentDidMount()

Вы можете написать фиктивную реализацию для этогометод, если вам нужно.