मैं वेबपैक का उपयोग करते समय जेस्ट/एंजाइम के साथ एक प्रतिक्रिया घटक का परीक्षण करने का प्रयास कर रहा हूं।परीक्षण प्रतिक्रिया: लक्ष्य कंटेनर एक डोम तत्व नहीं है
मैं एक बहुत ही साधारण परीक्षण @
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
it('App',() => {
const app = shallow(<App />);
expect(1).toEqual(1);
});
रिश्तेदार घटक यह उठा रहा है है:
Invariant Violation: _registerComponent(...): Target container is not a DOM element.
:
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 चल रहा एक विफलता का कारण बनता त्रुटियों के साथ @
at Object.<anonymous> (src/App.js:14:48) at Object.<anonymous> (src/App.test.js:4:38)
परीक्षण फ़ाइलों संदर्भ लाइन 4, जो <App /> के आयात, एक असफल का कारण बनता है कि। स्टैक ट्रेस का कहना है कि App.js की लाइन 14 विफलता का कारण है - जो react-dom से रेंडर कॉल से अधिक कुछ नहीं है, कुछ ऐसा जो मैंने कभी नहीं किया है (ऐप मेरे वेबपैक सेटअप से ठीक से प्रस्तुत करता है)।
:
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>
रीस क्या हो सकता है इस असाधारण प्रतिपादन समस्या के लिए? 15.0 पर नए जेस्ट अपडेट के साथ कुछ करना है?
मुझे एक ही त्रुटि मिली: - मुझे एवी के साथ परीक्षण किया गया है .. कृपया मुझे बताएं कि मुझे कहां गलत होना चाहिए .. निर्यात डिफ़ॉल्ट वर्ग अनुप्रयोग घटक फैली { प्रस्तुत करना() { वापसी (
@ भाविक खेनी कृपया, नया प्रश्न बनाएं और त्रुटि और स्टैक ट्रेस के साथ अपना पूरा कोड शामिल करें। – biphobe