Как провести модульное тестирование реактивных крюков путем неглубоких монтажных компонентов React Functional?

Question

Есть ли способ проверить функциональные компоненты, построенные с использованием крючков React, путем поверхностного монтажа компонента. Я сталкивался с Enzyme, не поддерживающим useEffect (https://airbnb.io/enzyme/#react -hooks-support ) и другими хуками с поверхностным рендерингом компонента, и я не хочу заходить в mount.

Также наткнулся на react-testing-library, являющийся новой и популярной альтернативой. Это лучший вариант по сравнению с ферментом? У меня уже есть Enzyme, используемый для тестирования компонентов на основе классов. Итак, их переписывание сопряжено с болью.

Answer 1

Да, вы можете, но вам нужно будет использовать шпионов . Например, если вы используете jest, вы можете использовать jest.spyOn с mockImplementationOnce () , он также должен работать с другими библиотеками spying.

Используя пример:

describe("React useEffect", () => {
  let useEffect, wrapper

  let mockUseEffect = () => {
    useEffect.mockImplementationOnce(f => f())
  }

  beforeEach(() => {
    useEffect = jest.spyOn(React, "useEffect")

    mockUseEffect()
    wrapper = shallow(<SomeComponent />)
  })

  it("your test", () => {
     // using wrapper
  })
}

Вот хорошая подробная статья от "Will Ockelmann-Wagner", и я добавил codeSandbox рабочий пример.

---

Хотя это работает, я бы посоветовал вам не использовать shallow рендеринг и начать использовать react-testing-library (называемый @ testing-library / реагирует в настоящее время), это хорошо документированное, легкое решение для тестирования, и я бы сказал, что это «самый близкий» тест, который вы можете получить в реальном мире ios. Он поставляется с CRA по умолчанию.

Вот базовый c codeSandbox пример и вот еще примеров из React Docs.

Также здесь это отличное видео от Кент C. Dodds , в котором рассматриваются различия между рендерингом shallow и подходом render из библиотеки реагирующего тестирования.