React jest test для использования Влияние на изменение маршрута

Question

У меня есть страница с вкладками. Каждая вкладка будет иметь хэштег для переключения вкладок при нажатии. Я добавил useEffect для setValue в состоянии.

Файл PageManager:

const RolePageManager = () => {
let location = useLocation()
let { uuid } = useParams()

const [tabIndex, setTabIndex] = useState(0)

useEffect(() => {
 if (location.hash) {
   switch (location.hash) {
     case '#role_info':
       setTabIndex(0)
       break
     case '#members':
       setTabIndex(1)
       break
     case '#permission':
       setTabIndex(2)
       break
     default:
       setTabIndex(0)
   }
 }
}, [location.hash])
......

Тестовый файл:

 const setState = jest.fn()
 const useStateSpy = jest.spyOn(React, 'useState')
 useStateSpy.mockImplementation((init) => [init, setState])
 const history = createMemoryHistory()

 it('something', () => {
   const wrapper = mount(
     <Router history={history}>
       <RolePageManager />
     </Router>
   )
   history.push('view/id/3#members')
   console.log(setState.mock)
 })

Проблема:

  -> state is not updating ::
  { calls: [], instances: [], invocationCallOrder: [], results: [] }

Если я удалю useEffect, он будет работать нормально, но будет в l oop. Вот почему я хочу использовать useEffect, но не смог установить состояние в тесте.

Я что-то пропустил? или мне что-то поменять?

Answer 1

Вам больше не следует шпионить за состояниями в реакции. Проверяет влияние tabIndex на отображаемый контент. Возможно, вы показываете что-то другое для разных значений индекса вкладки. Утверждайте это.

Кроме того, я бы порекомендовал превратить ваш useEffect в ловушку с именем useTabIndex и использовать эту настраиваемую ловушку внутри вашего модуля PageManager.

Затем при тестировании PageManager , имитируйте кастомный крючок. Протестируйте кастомный хук самостоятельно. Постарайтесь как можно больше разделить свои useEffects на настраиваемые хуки. Сохранит ваш код чистым и организованным, а также будет намного проще тестировать самостоятельно.

Я бы также рекомендовал использовать testing-library/react для проверки хуков. Делает жизнь намного проще.

Answer 2

Хороший пример. Насколько я понимаю, вы используете enzyme для монтирования компонента. Enzyme обрабатывает состояние, эффекты и другие вещи, связанные с жизненным циклом.

Состояние является частной частью компонента. С другой стороны, состояние создает виртуальную модель DOM. И результирующий виртуальный DOM может быть утвержден с помощью шутливых операторов.