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

Question

对于正在进行的项目，我们决定使用定制的JS库，该库在DOM中注入一个<script>标记，该标记链接到第三方JS库。 我一直在用CRA在React中编写这个项目，并使用带有浅层渲染的Airbnb酶来测试组件。 在介绍这个定制的JS库之前，我们没有测试项目和获得广泛报道的问题。 当我们引入它时，从目标组件（引入了定制逻辑）到根的所有测试文件都开始失败。 我调试了测试，发现这是因为这些组件相互导入（如下所示），而最后一个组件从使用window变量的自定义库中导入了其中一个函数，但找不到它。 我怀疑这是因为我使用的Airbnb酶浅层渲染无法渲染完整的DOM树。 但是，在完全成熟的应用程序中，由于存在window ，因此自定义库起作用。

从链中可以看到， Content导入了ObjectCatalogContainer ，后者又导入了ObjectCatalog ，后者又导入了CatalogView ，在其中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)

首先，我想知道如何在不完全解决所有嵌套组件的情况下使浅层渲染正常工作。 其次，如果需要强制解决嵌套的组件，那么是否可以让酶模拟掉它们？ 第三，是否可以告诉Jest以自动方式模拟此类组件？ （请记住，我正在使用Create-React-App，因此配置受到限制）

Answer 1

你为什么不使用安装 ，而不是浅为全面DOM渲染？

尝试这个：

              "automock":true

欲了解更多， 请点击这里