Question

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

完整测试失败输出：

EntityRegistry

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

Answer 1

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

尝试一下：

              "automock":true

更多信息：check here

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

1 个答案: