使用mount创建的运行测试：目标容器不是DOM元素。

Question

该应用程序运行正常，但是当我运行测试（即“纱线运行测试”）时，它显示错误：目标容器不是DOM元素。我没有在发生Reactdom渲染的位置导入文件。多谢您协助解决此问题。谢谢。

复制步骤

请查看可复制的演示

预期行为

当我使用“ yarn start”运行应用程序时，它运行良好。仅当我运行测试时才会出现问题。 我希望测试能够正常运行。

实际行为

当我“挂载” app.js组件时出现错误。 不变违规：目标容器不是DOM元素。

可复制的演示

尝试在仓库中运行“ yarn run test”，或查看下面的代码示例。谢谢 https://github.com/SeunghunSunmoonLee/react-graphql-d3-vx

```
// containers/app/index.test.js
import App from './index.js'
import { Provider } from 'react-redux'
import { push, ConnectedRouter } from 'react-router-redux';
import { ApolloProvider } from 'react-apollo';
import { shallow, mount } from 'enzyme';
import store from '../../store.js'
// import configureStore from '../../../configureStore';
// import createHistory from 'history/createBrowserHistory';

// import { GET_POSTS } from './index.js';

// const initialState = {};
const history = createHistory({ basename: '/' });
// const store = configureStore(initialState, history);

export const client = new ApolloClient({
  uri: 'https://fakerql.com/graphql',
});
const asyncFlush = () => new Promise(resolve => setTimeout(resolve, 1000));

// const mocks = [
//   {
//     request: {
//       query: GET_POSTS,
//     },
//     result: mockData,
//   },
// ];
describe('<Histogram/> in Home Page with real data from server', async () => {
  let screen;
  beforeEach(async () => {
    screen = mount(
      <ApolloProvider client={client}>
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </Provider>
      </ApolloProvider>
    )
    screen.find(Provider).prop('store').dispatch(push('/'));
    await asyncFlush();
  })
  it('shuld have postsByMonthSorted in component state', () => {
    expect(screen.state().postsByMonthSorted).not.toHaveLength(0);
    expect(screen.state().postsByMonthSorted).toHaveLength(12);
  })
  it('should render svg properly', () => {
    expect(screen.find('svg').to.have.lengthOf(4))
  })
  it('it should be defined', () => {
    expect(Histogram).toBeDefined();
  });

  // it('it should have the .vx-bar class', () => {
  //   expect(
  //     HistogramWrapper({
  //       className: 'test'
  //     }).prop('className')
  //   ).toBe('vx-bar test');
  // });
})

// containers/app/index.js
import React from 'react'
import { Route, Link } from 'react-router-dom'
import Home from '../home'
import About from '../about'

// <header style={{width: '400px', height: '50px', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
//   <Link to="/">Home</Link>
//   <Link to="/about-us">About</Link>
// </header>
class App extends React.Component {
  render() {
    return (
      <div>
        <main>
          <Route exact path="/" component={Home} />
          <Route exact path="/about-us" component={About} />
        </main>
      </div>
    )
  }
}

export default App

// src/index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
import { ApolloProvider } from 'react-apollo';
// import { ApolloClient } from 'apollo-client';
// import { HttpLink } from 'apollo-link-http';
// import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-boost';

import store, { history } from './store'
import App from './containers/app'

import 'sanitize.css/sanitize.css'
import './index.css'

export const client = new ApolloClient({
  uri: 'https://fakerql.com/graphql',
});
// const gql_URL = 'http://localhost:4000';
//
// const httpLink = new HttpLink({
//   uri: gql_URL,
// });
// const cache = new InMemoryCache();
// const client = new ApolloClient({
//   link: httpLink,
//   cache,
// });

render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </Provider>
  </ApolloProvider>,
  document.getElementById('root')
)

```

Answer 1

我正在从app.js中的index.js导入某些内容，删除后解决了该问题。