запуск теста с использованием mount создает: целевой контейнер не является элементом DOM. - PullRequest
Новая
       44

запуск теста с использованием mount создает: целевой контейнер не является элементом DOM.

0 голосов
/ 14 декабря 2018

приложение работает нормально, но когда я запускаю тест, т. Е. «Тест запуска пряжи», он показывает ошибку: целевой контейнер не является элементом DOM.Я не импортирую файл, в котором происходит рендеринг реакции.Буду признателен за помощь в решении этой проблемы.спасибо.

Шаги по воспроизведению

пожалуйста, посмотрите на воспроизводимую демонстрацию

Ожидаемое поведение

Все работает нормально, когда я запускаю приложение с помощью 'запуска пряжи'.Проблема возникает только при запуске теста.Я ожидал, что тест будет выполнен правильно.

Фактическое поведение

Ошибка, когда я "монтирую" компонент app.js.Нарушение инварианта: целевой контейнер не является элементом DOM.

Воспроизводимая демонстрация

попробуйте запустить «тест запуска пряжи» в репозитории или посмотрите примеры кода ниже.спасибо 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')
)

```

1 Ответ

0 голосов
/ 14 декабря 2018

Я импортировал что-то из index.js в app.js, что после удаления решило проблему.

...