Тестирование Create-React-App и Jest Mocking

Для проекта на работе мы решили использовать специальную JS-библиотеку, которая вводит <script>тег в DOM, который ссылается на стороннюю JS-библиотеку. Я пишу этот проект в React with CRA и используя Airbnb Enzyme с мелкой визуализацией для тестирования компонентов. До внедрения этой специально построенной JS-библиотеки у нас не было проблем с тестированием проекта и усилением охвата. Когда мы ввели его, все тестовые файлы из целевого компонента (где введена пользовательская логика) до отказа начального компьютера. Я отлаживал тесты и замечал, что это связано с тем, что эти компоненты импортируют друг друга (например, ниже), а последний импортирует одну из этих функций из пользовательской библиотеки, которая используетwindowпеременная, и она не может ее найти. Я подозреваю, что это потому, что я использую мелкую рендеринг Airbnb Enzyme, которая не отображает полное дерево DOM. Однако в полностью запущенном приложении пользовательская библиотека работает, потому что есть window.

вложенный импорт Вы можете видеть из цепочки, которая Contentимпортирует ObjectCatalogContainerимпорт, ObjectCatalogкоторый импортирует, CatalogViewкогда вызывается новая внедренная пользовательская библиотека.

Когда я ввожу эту строку Content.test.tsx, после импорта тест снова проходит: jest.mock('../../containers/ObjectCatalog/ObjectCatalogContainer', () => 'mock')

Content.tsx

import * as React from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import { Layout } from 'antd'
import { ObjectCatalogContainer } from '../../containers/ObjectCatalog/ObjectCatalogContainer'

export const Content = () => (
  <Layout.Content>
    <Switch>
      <Route exact={true} path="/" component={ObjectCatalogContainer} />
      <Redirect to="/" />
    </Switch>
  </Layout.Content>
)

Это мой тест:

it('render', () => {
  // method under test
  const wrapper = shallow(<Content />)

  // assertions
  expect(wrapper.matchesElement((
    <Layout.Content>
      <Switch>
        <Route exact={true} path="/" component={ObjectCatalogContainer} />
        <Redirect to="/" />
      </Switch>
    </Layout.Content>
  ))).toEqual(true)
})

полный выход отказа теста:

  ? Test suite failed to run

    ReferenceError: window is not defined

      7 | }
      8 | export const AppTracking = new Tracking(trackingOptions)
    > 9 | 

      at node_modules/we-tracking-js/dist/src/tracking/Tracking.js:94:29
      at Tracking.Object.<anonymous>.Tracking.initializeSegment (node_modules/we-tracking-js/dist/src/tracking/Tracking.js:125:10)
      at new Tracking (node_modules/we-tracking-js/dist/src/tracking/Tracking.js:12:18)
      at Object.<anonymous> (src/services/AppTracking.ts:9:23)
      at Object.<anonymous> (src/components/ObjectCatalog/Catalog/CatalogView.tsx:10:23)

Во-первых, мне интересно, как заставить мелкий рендеринг работать без полного разрешения всех вложенных компонентов. Во-вторых, если вложенные компоненты должны быть обязательно разрешены, то возможно ли, что Enzyme издевается над ними? В-третьих, можно ли рассказать Джесту о том, чтобы издеваться над такими компонентами в автоматическом режиме? (Помните, что я использую Create-React-App, поэтому конфигурации ограничены)

javascript,reactjs,unit-testing,jestjs,enzyme,

0
Яндекс.Метрика