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

Question

For a project at work we decided to use a custom-built JS library that injects a <script> tag in the DOM that links to a third-party JS library. I've been writing this project in React with CRA and using Airbnb Enzyme with shallow rendering to test the components. Prior to introducing this custom-built JS library, we had no issues testing the project and getting strong coverage. When we introduced it, all test files from the target component (where the custom-logic is introduced) up to the root started failing. I debugged the tests and noticed that it's because those components import each other (like below) and the last one imports one of those functions from the custom library that uses the window variable and it can't find it. I suspect this is because I am using Airbnb Enzyme shallow rendering that does not render a full DOM tree. However, in a fully fledged out application, the custom library works because there is a window .

You can see from the chain that Content imports ObjectCatalogContainer which imports ObjectCatalog which imports CatalogView where the newly-introduced custom library is called.

When I introduce this line in Content.test.tsx , after the imports, the test passes again: 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>
)

This is my test:

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)
})

full test failure output:

  ● 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)

First, I wonder how to get the shallow rendering to work without fully resolving all nested components. Second, if the nested components need to be mandatorily resolved, then is it possible to have Enzyme mock them out? Third, is it possible to tell Jest to mock such components in automatic fashion? (Remember I am using Create-React-App, so configurations are limited)

Answer 1

Why don't you use mount instead of shallow for the full DOM rendering?

try this:

              "automock":true

For more: check here