Les tests de Réagir: Conteneur Cible n'est pas un élément du DOM
Je suis tenté de tester une de Réagir avec volet de la Plaisanterie/Enzyme lors de l'utilisation Webpack.
J'ai une question très simple test @
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
it('App', () => {
const app = shallow(<App />);
expect(1).toEqual(1);
});
La relative de la composante, c'est de ramasser est :
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'));
Toutefois, l'exécution de jest
les causes d'un échec:
Invariant Violation: _registerComponent(...): Target container is not a DOM element.
Avec des erreurs @
at Object.<anonymous> (src/App.js:14:48)
at Object.<anonymous> (src/App.test.js:4:38)
Les fichiers de test des références de la ligne 4, qui est l'importation de <App />
, qui provoque un échec. La trace de pile indique la ligne 14 de App.js
est la raison de l'échec-qui n'est rien de plus que la file d'appel de react-dom
, quelque chose que je n'ai jamais eu un problème avec (l'app affiche correctement de mon Webpack de l'installation).
Pour ceux qui sont intéressés (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'
}
]
}
}
Et mon 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"
}
}
Oh, et si quelqu'un va dire que l'élément div n'est pas chargé avant le script, voici mon 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>
Ce qui pourrait être la raison de ce curieux problème de rendu? Quelque chose à faire avec une nouvelle Plaisanterie mise à jour à 15,0?
OriginalL'auteur ilrein | 2016-10-11
Vous devez vous connecter pour publier un commentaire.
App.jsx
est censé pour l'exportation de la classe App et faire rien de plus,render
doit être appelé ailleurs.Si vous supprimez le
render
appel à partir de l'App.jsx erreur devrait disparaître, il apparaît parce que l'environnement de test ne fournit pas les DOM avec unapp
id.S'il vous plaît, créer une nouvelle question et d'y inclure votre code complet avec l'erreur et la trace de la pile.
OriginalL'auteur biphobe
Pour quelqu'un d'autre qui a été peignage à travers l'internet comme je l'ai été - à la recherche d'une solution à cette question lors de l'essai avec Jest - je vais sauvegarder la réponse par @biphobe en disant Plaisanterie va provoquer cette erreur se produit lorsque vous exportez quelque chose à l'intérieur du même fichier qui appelle ReactDOM.le rendu.
Dans mon cas, j'étais à l'exportation d'un objet à l'intérieur de mon index.js où j'ai également appel ReactDOM.le rendu. J'ai enlevé cette exportation et le tour est joué!
ReactDOM.render()
était justement ce dont j'avais besoin pour comprendre exactement le problème!Content que cela a été utile!
im ayant un problème similaire lorsque vous essayez d'importer des actions dans mon test. Malheureusement, la suppression ReactDom n'aide pas
Salut @ZacharyBennett pouvez-vous expliquer votre point de vue?
J'ai du courir dans des problèmes avec la Blague quand j'ai essayé à la fois appel ReactDOM.le rendu et l'exportation quelque chose dans le même fichier javascript.
OriginalL'auteur Zachary Bennett
Que je la vois, cette erreur survient dans de nombreux cas et nécessite des approches différentes pour résoudre. Mon scénario n'est pas le même que l'exemple ci-dessus, j'utilise redux & routeur, bien que j'ai été aux prises avec le même message d'erreur. Ce qui m'a aidé à résoudre ce problème est de changer
index.js
à partir de::
change de "guillemets" à "entre des guillemets simples' a fonctionné pour moi, merci!!!!!
OriginalL'auteur Islam Murtazaev
J'ai trouvé une solution pour cette erreur à mon cas d'utilisation: l'Utilisation de la même Redux magasin de Réagir est l'aide de l'extérieur de Réagir.
En essayant d'exporter mes Réagir de Redux
store
deindex.tsx
être utilisé quelque part d'autre en dehors de l'Réagissent application, j'avais la même erreur lors de l'exécution de la Plaisanterie tests (qui rendent l'utilisation de l'Enzyme) dans leApp.tsx
fichier.L'erreur
Le code initial qui n'a pas fonctionné lors du test de Réagir comme ça.
La solution qui a fonctionné pour moi
Séparer le Redux magasin de logique dans un nouveau fichier nommé
store.ts
, puis créer undefault export
(pour être utilisé parindex.tsx
, c'est à dire, la Réagir la demande) et d'un non-exportation par défaut avecexport const store
(non-Réagir classes), comme suit.À l'aide de la Redux magasin de non-Réagir classes
La
default
exportationUne petite note avant de partir. Voici comment utiliser la
default
et de la non-valeur par défaut exportations.default export store;
est utilisé avecimport store from "./store";
export const store = ...
est utilisé avecimport { store } from "./store";
Espérons que cette aide!
https://nono.ma/says/solved-invariant-violation-target-container-is-not-a-dom-element
OriginalL'auteur Nono