mount() 失败，因为目标容器不是 dom 元素

Question

我收到错误消息Target container is not a DOM element。使用 webpack。

完全错误：

FAIL  src/App.test.js
 ● Test suite failed to run

Invariant Violation: Target container is not a DOM element.

  at invariant (node_modules/fbjs/lib/invariant.js:42:15)
  at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17238:34)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17317:12)
  at Object.<anonymous> (src/index.js:32:20)
  at Object.<anonymous> (src/App.test.js:5:14)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:169:7)

App.js

import React, { Component } from 'react';
import './App.scss';
import Tables from './containers/Tables/Tables'

class App extends Component {
  render() {
    return (
        <Tables />
    );
  }
}

导出默认应用；

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import aaaApi from '@aaa/aaajs';
import './index.css';
import App from './App';
import tableBuilderReducer from './store/reducers/tableBuilder'
import registerServiceWorker from './registerServiceWorker';    

const aaa = new aaaApi('xxx');

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const reducers = {
  platforms: tableBuilderReducer('platforms'),
  regions: tableBuilderReducer('regions'),
  playback: tableBuilderReducer('playback')}

export const store = createStore(
  combineReducers(reducers),
  composeEnhancers(
    applyMiddleware(thunk.withExtraArgument(aaa)),
  ),
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

registerServiceWorker();

App.test.js

import React from 'react'
import Enzyme, { mount, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import App from './App' 
import { store } from './index.js'

Enzyme.configure({ adapter: new Adapter() })

function setup() {
    const props = {
        sortColumnHandler: jest.fn()
    }

    const enzymeWraper = mount(<App />)

    return {
        props,
        enzymeWraper
    }
}

describe('components', ()=> {
    describe('Tables', () => {
        it('should render self and sub-components', () => {
            const { enzymeWraper }  = setup()
        })
    })
})

Answer 1

问题是由 index.js 包含在测试中引起的，并且当在 Jest 中的 jsdom 环境创建的文档中找不到 root 时在 ReactDOM.render() 处失败。

App.test.js 中不需要import { store } from './index.js'，因此删除它可以修复初始错误。

使用enzyme 中的mount 执行full DOM rendering 并要求所有内容都设置为完整渲染。它只能用于对使用生命周期方法、与 DOM 交互等的组件进行单元测试。它将完全呈现正在测试的组件和所有子组件。在这种情况下，App 的子代使用 redux 存储，因此需要在包装 Provider 中提供存储，以便使用 mount 进行完整渲染。

在大多数情况下，应使用 shallow 对 React 组件进行单元测试。它执行shallow rendering of just the component being tested。在这种情况下，App 是一个简单的无状态组件，其中包含 Tables，因此使用 shallow 是正确的方法。

额外提示：

将enzyme-to-json 安装为开发依赖项，将其作为快照序列化程序添加到Jest，App.test.js 被简化为：

import { shallow } from 'enzyme';
import * as React from 'react';

describe("App", () => {

  it('renders as expected', () => {
    const component = shallow(<App />);
    expect(component).toMatchSnapshot();
  });

});