Тестирование React: целевой контейнер не является элементом DOM

Я пытаюсь протестировать компонент реакции с помощью Jest / Enzyme при использовании Webpack.

у меня очень простой тест @

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

import App from './App';

it('App', () => {
  const app = shallow(<App />);
  expect(1).toEqual(1);
});

относительный компонент, который он собирает:

import React, { Component } from 'react';
import { render } from 'react-dom';

// import './styles/normalize.css';

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

render(<App />, document.getElementById('app'));
, под управлением jest причины отказа:

Invariant Violation: _registerComponent(...): Target container is not a DOM element.

с ошибками @

at Object.<anonymous> (src/App.js:14:48) at Object.<anonymous> (src/App.test.js:4:38)

тестовые файлы ссылаются на строку 4, которая является импортом <App />, что вызывает сбой. Трассировка стека говорит строка 14 из App.js является причиной сбоя , который является не более чем вызовом рендеринга из react-dom, что-то, с чем у меня никогда не было проблем (приложение правильно отображается из моей настройки Webpack).

для тех, кто заинтересован (Webpack код):

module.exports = {
  entry: './src/App',
  output: {
    filename: 'bundle.js',
    path: './dist'
  },
  module: {
    loaders: [
      {
        test: /.js?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /.css$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
      },
      {
        test: /.scss$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'
      }
    ]
  }
}

и меня package.json:

{
  "name": "tic-tac-dux",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --inline --hot --content-base dist/",
    "test": "jest"
  },
  "jest": {
    "moduleNameMapper": {
      "^.+.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "^.+.(css|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-jest": "^16.0.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "enzyme": "^2.4.1",
    "jest": "^16.0.1",
    "jest-cli": "^16.0.1",
    "node-sass": "^3.10.1",
    "react-addons-test-utils": "^15.3.2",
    "react-dom": "^15.3.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  }
}

О, и если кто-то собирается сказать, что элемент div не загружается до скрипта, вот мой index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

что может быть причина этой странной проблемы с рендерингом? Что-то связанное с новым обновлением Jest до 15.0?

12
ecmascript-6 javascript reactjs tdd

3 ответов

App.jsx предполагается экспортировать класс приложения и больше ничего не делать, render следует вызывать в другом месте.

если убрать render вызов из приложения.ошибка jsx должна исчезнуть, она появляется, потому что тестовая среда не предоставляет DOM с app id.

18

для тех, кто прочесывал интернет, как я искал решение для этого при тестировании с помощью Jest - я создам резервную копию ответа @biphobe, сказав, что Jest вызовет эту ошибку, когда вы экспортируете что - то внутри того же файла, который вызывает ReactDOM.оказывать.

в моем случае я экспортировал объект в своем индексе.js, где я также называл ReactDOM.оказывать. Я удалил этот экспорт и вуаля!

17

как я вижу, эта ошибка возникает во многих случаях и требует различных подходов для ее решения. Мой сценарий не совпадает с приведенным выше примером, я использую redux & маршрутизатор, хотя я боролся с той же самой ошибкой. Что помогло мне решить эту проблему-изменить index.js from:

ReactDOM.render(
  <Provider store={store}>
    <AppRouter />
  </Provider>,
  document.getElementById("root")
);
registerServiceWorker();

в:

ReactDOM.render(
    (<Provider store={store}>
        <AppRouter/>
    </Provider>),
     document.getElementById('root') || document.createElement('div') // for testing purposes
);
registerServiceWorker();
1