ilr*_*ein 22 javascript tdd ecmascript-6 reactjs
我正在尝试使用Webpack测试带有Jest/Enzyme的React组件.
我有一个非常简单的测试@
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有什么关系？
bip*_*obe 28
App.jsx应该导出App类而不做任何render其他事情,应该在别处调用.
如果render从App.jsx中删除调用错误应该消失,它会弹出,因为测试环境不会为DOM提供appid.
Zac*_*ett 28
对于那些正在通过互联网进行梳理的人 - 就像我一直在寻找解决方案 - 在使用Jest进行测试时 - 我将通过@biphobe备份答案,说当你输出内容时,Jest会导致出现此错误调用ReactDOM.render的同一文件.
在我的例子中,我在index.js中导出一个对象,我也在那里调用ReactDOM.render.我删除了这个导出,瞧!
Isl*_*aev 14
正如我所看到的,在许多情况下会出现这种错误,需要采用不同的方法来解决它.我的场景与上面的例子不一样,我使用redux和路由器,虽然我正在努力解决同样的错误.帮我解决这个问题的原因是改变index.js:
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();
小智 9
我为我的用例找到了针对此错误的解决方案：使用 React 在 React 之外使用的相同 Redux 存储。
在尝试汇出我的阵营的终极版store从index.tsx使用别的地方以外的应用做出反应，我得到了同样的错误，同时运行玩笑测试（其中利用酶）中App.tsx的文件。
测试 React 时不起作用的初始代码如下所示。
// index.tsx
import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { applyMiddleware, compose, createStore } from "redux";
import App from "./components/App";
import { rootReducer } from "./store/reducers";
import { initialState } from "./store/state";
const middlewares = [];
export const store = createStore(
rootReducer,
initialState,
compose(applyMiddleware(...middlewares)),
);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root"),
);
将 Redux 存储逻辑分离到一个名为 的新文件中store.ts，然后创建一个default export（供index.tsx，即 React 应用程序使用）和一个非默认导出 with export const store（供非 React 类使用），如下所示。
// store.ts
import { applyMiddleware, compose, createStore } from "redux";
import logger from "redux-logger";
import { rootReducer } from "./store/reducers";
import { initialState } from "./store/state";
const middlewares = [];
export const store = createStore(
rootReducer,
initialState,
compose(applyMiddleware(...middlewares)),
);
export default store;
// updated index.tsx
import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./components/App";
import store from "./store";
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root"),
);
// MyClass.ts
import { store } from "./store"; // store.ts
export default class MyClass {
handleClick() {
store.dispatch({ ...new SomeAction() });
}
}
default出口走之前的小纸条。以下是如何使用default和非默认导出。
default export store; 与 import store from "./store";export const store = ... 与 import { store } from "./store";希望这可以帮助！
https://nono.ma/says/solved-invariant-violation-target-container-is-not-a-dom-element
小智 6
确保在您的测试文件中已正确导入渲染组件。它应该从以下位置导入，@testing-library/react而不是从以下位置导入react-dom：
import { render } from '@testing-library/react';
| 归档时间： |
|
| 查看次数： |
16296 次 |
| 最近记录： |