Tôi đang cố thử nghiệm thành phần React bằng Jest/Enzyme trong khi sử dụng Webpack.Kiểm tra phản ứng: Vùng chứa đích không phải là phần tử DOM
Tôi có một bài kiểm tra rất đơn giản @
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
it('App',() => {
const app = shallow(<App />);
expect(1).toEqual(1);
});
Các thành phần tương đối nó nhặt được:
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'));
Tuy nhiên, chạy jest gây ra một thất bại:
Invariant Violation: _registerComponent(...): Target container is not a DOM element.
Có lỗi @
at Object.<anonymous> (src/App.js:14:48) at Object.<anonymous> (src/App.test.js:4:38)
Các tập tin kiểm tra tài liệu tham khảo dòng 4, đó là việc nhập khẩu <App />, gây ra một thất bại. Theo dõi stack cho biết dòng 14 của App.js là lý do cho sự thất bại - đó là không có gì hơn gọi render từ react-dom, một cái gì đó tôi đã không bao giờ có một thách thức với (các ứng dụng ám đúng từ thiết lập Webpack của tôi).
Đối với những người quan tâm (Webpack code):
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'
}
]
}
}
Và package.json tôi:
{
"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"
}
}
Oh, và nếu có ai sẽ nói rằng phần tử div không được nạp trước tập lệnh, đây là số 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>
Điều gì có thể là sự cố về vấn đề kết xuất đặc biệt này? Một cái gì đó để làm với một bản cập nhật Jest mới đến 15.0?
tôi gặp lỗi tương tự: - tôi đang thử nghiệm với .. hãy cho tôi biết tôi nên làm gì sai. lớp mặc định xuất khẩu App kéo dài Component { render() { trở lại (
@BhavikKheni Vui lòng tạo câu hỏi mới và bao gồm mã hoàn chỉnh của bạn cùng với lỗi và theo dõi ngăn xếp tại đó. – biphobe