반응 테스트: 대상 컨테이너가 DOM 요소가 아닙니다.
웹 팩을 사용하면서 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의 원인입니다.은, 「Render 」( 콜)에 않습니다.이것은, 로부터의 렌더 콜에 지나지 않습니다.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 요소, 즉 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으로 업데이트 된 Jest와 관련이 있나요?
지금까지와 같이 인터넷을 샅샅이 뒤지고 있는 분들을 위해 - Jest를 사용하여 테스트 할 때 이에 대한 해결책을 찾고 있는 분들을 위해 - 저는 Jest가 ReactDOM.render를 호출하는 동일한 파일 내에 무언가를 내보낼 때 이 오류를 발생시킨다고 말하면서 @biphobe의 답변을 백업합니다.
내 경우 Index.js 내에서 객체를 내보내고 있었는데, 여기서도 ReactDOM.render를 호출하고 있었습니다.내가 이 수출품을 없앴어!
App.jsx 더 이상 .render하다
「」를했을 경우render 환경에서는 .jsx가 입니다.테스트 환경에서 DOM 에 대한 정보가 제공되지 않기 때문에 팝업으로 표시됩니다.jsx 에러가 표시됩니다.appid.id 를 해 주세요
이 에러는, 많은 경우에 발생하고 있기 때문에, 다른 방법으로 해결할 필요가 있습니다.이 시나리오는 위의 예와 동일하지 않습니다.단, 같은 에러에 시달리고 있었지만, 저는 redux & router를 사용하고 있습니다.이 문제를 해결하는데 도움을 준 것은 변화이다.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();
사용 사례에 대한 이 오류에 대한 해결 방법을 찾았습니다.React가 React 외부에서 사용하는 것과 동일한 Redux 스토어를 사용합니다.
In trying to export my React's Redux React의 Redux를 내보내려고 할 때store부에서index.tsx반응 응용 프로그램의 외부 어딘가에 사용될 경우 니 습 다 었 가 고 of 러 하 생 은 장 to 해 는 ation 사 make of jest enzyme outside use (App.tsx파일.
에러
리액트를 테스트할 때 작동하지 않았던 초기 코드는 이렇게 생겼습니다.
// 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.tsxReact 어플리케이션) 및 디폴트 이외의 export는 다음과 같습니다.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"),
);
비React 클래스에서 Redux 저장소 사용
// 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
테스트 파일에서 렌더 구성요소를 올바르게 가져왔는지 확인합니다.에서 Import해야 합니다.@testing-library/react에서가 아니다react-dom:
import { render } from '@testing-library/react';
개발자가 파일에서 컴포넌트를 내보내는 것을 막을 수는 없습니다.또한 이 컴포넌트에 react-dom Import 또는 사용이 포함되어 있어도 단독으로 테스트합니다.내 말은, 뭐가 잘못됐는지 말이야. 우리는 그것이 유효한 코드 조각이라면 파일 전체를 방해하고 일부 파일을 테스트하려고 하는 게 아니야.
Jeest는 react-dom에는 문제가 없지만 개념적으로는 다릅니다.Jeest는 브라우저가 없는 가상 테스트 환경이라고 생각됩니다.React-DOM은 리액트 컴포넌트를 위해 가상 DOM을 실제 DOM에 연결하는 라이브러리입니다.따라서 정상적인 방법으로 테스트하거나 테스트하지 않아야 합니다.하지만 지금은 그런 논의가 아닙니다. 우리의 수출 부품이 테스트 가능한 한 저희는 괜찮습니다.
그러니 비웃자
jest config에서 "setup Files After Env"로 설정된 test Setup 파일에서 mock을 수행했습니다.
jest.mock("react-dom", () => {
return ({
"render": jest.fn()
})
})
그것은 나에게 꽤 효과가 있다.리액트 및 리액트 도메인코드는 이제 하나의 파일로 행복하게 연동되어 브라우저 및 테스트 환경에서도 작동합니다.
이 때문에 문제가 발생하지 않았습니다.댓글 섹션이 있으면 알아보겠습니다
이 솔루션은 나에게 효과가 있었다.요소가 있는 경우 렌더링:
const root = document.getElementById('root');
if (root) {
render(
<App />,
root,
);
}
이 오류는 작업 시에도 발생할 수 있다는 것을 알게 되었습니다.Portals테스트에서 확인하세요.오류를 건너뛸 경우 다음 중 하나를 수행할 수 있습니다.mock Portals또는 를 추가합니다.Portal렌더 메서드의 컨테이너 요소:
render (
<div>
<TestedComponent />
<div id="portal" />
</div>
)
언급URL : https://stackoverflow.com/questions/39986178/testing-react-target-container-is-not-a-dom-element
'source' 카테고리의 다른 글
| jQuery ajax 응답 html로 div 업데이트 (0) | 2023.03.23 |
|---|---|
| Ajax 호출 완료 후 함수 실행 (0) | 2023.03.23 |
| WordPress에서 위젯의 HTML 코드를 변경하는 방법 (0) | 2023.03.23 |
| JSON 개체에 null 값을 넣을 수 없습니다. (0) | 2023.03.23 |
| Wordpress 사용자 지정 게시 유형이 관리 왼쪽 사이드바 메뉴에 표시되지 않음 (0) | 2023.03.23 |