创建React应用程序测试和笑话模拟

对于一个工作中的项目,我们决定使用一个定制的JS库,它注入 <script> 链接到第三方JS库的DOM中的标记。我一直在写这个项目与CRA反应,并使用Airbnb酶浅渲染测试组件。在引入这个定制的JS库之前,我们在测试项目和获得强大的覆盖率方面没有遇到任何问题。当我们引入它时,从目标组件(引入自定义逻辑的地方)到根目录的所有测试文件都开始失败。我调试了测试,注意到这是因为这些组件互相导入(如下所示),最后一个组件从使用 window 变量,但找不到它。我怀疑这是因为我使用的是Airbnb酶浅渲染,它不能渲染完整的DOM树。但是,在一个成熟的应用程序中,自定义库可以工作,因为 窗口 .

从链条上可以看出 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)

首先,我想知道如何在不完全解析所有嵌套组件的情况下使浅层渲染工作。第二,如果需要强制解决嵌套组件,那么有没有可能让酶模拟它们呢?第三,有没有可能告诉杰斯特用自动的方式模仿这些组件?(请记住,我使用的是Create React应用程序,因此配置有限)