首页 > 解决方案 > 使用 Create React App 运行 Jest 测试时文档为空

问题描述

我正在运行一个 Jest 测试,由于 react-dom 找不到文档,当我设置状态时出错。我在 react-dom 中放置了一个日志语句,我看到该文档最初已填充

  console.log node_modules/react-dom/cjs/react-dom.development.js:5066
    !!!! Document {
      location: [Getter/Setter],
      _reactListenersID0002526682692260973: 0 }

但后来在测试执行中它为空,这就是我在 Jest 测试中遇到的错误。

  console.log node_modules/react-dom/cjs/react-dom.development.js:5066
    !!!! null

错误信息:

  console.log src/containers/App.js:266
    handleError TypeError: Cannot read property 'body' of null
        at getActiveElement (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:5069:16)
        at getActiveElementDeep (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:5334:17)
        at getSelectionInformation (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:5366:21)
        at prepareForCommit (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:8689:26)
        at commitRoot (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:17711:3)
        at completeRoot (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:19239:3)
        at performWorkOnRoot (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:19168:9)
        at performWork (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:19076:7)
        at performSyncWork (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:19050:3)
        at requestWork (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:18919:5)
        at scheduleWork (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:18728:5)
        at Object.enqueueSetState (/home/jc/projects/grip/grip-client/node_modules/react-dom/cjs/react-dom.development.js:12456:5)
        at App.Object.<anonymous>.Component.setState (/home/jc/projects/grip/grip-client/node_modules/react/cjs/react.development.js:375:16)
        at setState (/home/jc/projects/grip/grip-client/src/containers/App.js:250:14)
        at tryCatcher (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/util.js:16:23)
        at Promise._settlePromiseFromHandler (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/promise.js:512:31)
        at Promise._settlePromise (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/promise.js:569:18)
        at Promise._settlePromiseCtx (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/promise.js:606:10)
        at _drainQueueStep (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/async.js:142:12)
        at _drainQueue (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/async.js:131:9)
        at Async.Object.<anonymous>.Async._drainQueues (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/async.js:147:5)
        at Immediate.Async.drainQueues [as _onImmediate] (/home/jc/projects/grip/grip-client/node_modules/bluebird/js/release/async.js:17:14)
        at runCallback (timers.js:705:18)
        at tryOnImmediate (timers.js:676:5)
        at processImmediate (timers.js:658:5)

应用程序.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { shallow, mount } from 'enzyme';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import { JSDOM } from 'jsdom';

import configureStore from '../../store/configureStore';

global.Promise = require('bluebird');
const util = require('util');

jest.mock('../../actions/simulationRuns');
let App;

describe('App', () => {
  beforeEach(() => {
    // Set up some mocked out file info before each test
    App = require('../App').default;
  });

  it('renders without crashing - mount', () => {
    const div = document.createElement('div');
    ReactDOM.render(
      <Router>
        <Provider store={configureStore()}>
          <Route path="/">
            <App />
          </Route>
        </Provider>
      </Router>,
      div
    );
  });
});

setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

标签: reactjsjestjsenzyme

解决方案


推荐阅读