Почему вы не используете mount вместо мелкого для полного рендеринга DOM?
попробуй это:
"automock":true
Подробнее: здесь
Для проекта на работе мы решили использовать специальную 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,