Тестирование: Target Container не является элементом DOM

Я пытаюсь протестировать компонент React с Jest/Enzyme при использовании Webpack.Тестирование: Target Container не является элементом DOM

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

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?

источник

2016-10-11 ilrein

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

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

источник

2016-10-17 16:06:23 biphobe

я получил ту же ошибку: - я протестирована с Ava .. пожалуйста скажите мне, где я должен неправильно .. класс экспорта по умолчанию App расширяет компонент { визуализации() { возвращение (

{this.props.children}

) } } визуализации (( <История Router = {browserHistory}> <Маршрут Путь = "/" компонент = {App }> <Маршрут путь = "стр.1" компонент = {Стр.1} /> <Маршрут путь = "страница2" компонент = {Страница2} /> ), документ .getElementById ('приложение')); –

@BhavikKheni Пожалуйста, создайте новый вопрос и включите ваш полный код вместе с ошибкой и трассировкой стека. – biphobe

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

источник

2017-03-05 17:56:58

Спасибо, это именно то, что я искал. Явное упоминание о вызове 'ReactDOM.render()' было именно тем, что мне нужно для понимания точной проблемы! – Aaron

Рад, что это было полезно! –

У меня такая же проблема при попытке импортировать действия в мой тест. К сожалению, удаление ReactDom не помогает –

Тестирование: Target Container не является элементом DOM

ответ

Смежные вопросы