Create-React-App 测试和 Jest Mocking答案

【问题标题】：Create-React-App Testing and Jest MockingCreate-React-App 测试和 Jest Mocking
【发布时间】：2019-01-30 09:12:46
【问题描述】：

对于一个正在工作的项目，我们决定使用一个定制的 JS 库，该库在 DOM 中注入一个<script> 标记，该标签链接到第三方 JS 库。我一直在用 CRA 用 React 编写这个项目，并使用带有浅层渲染的 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 模拟出来？第三，是否可以告诉 Jest 以自动方式模拟这些组件？（记住我使用的是 Create-React-App，所以配置是有限的）

【问题讨论】：

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

为什么不使用 mount 而不是 shallow 进行完整的 DOM 渲染？

试试这个：

              "automock":true

更多：check here

【讨论】：