Ich migriere eine große Anwendung von Karma/Mocha zu Jest zum Testen. Ich habe einige wirklich grundlegende Tests für unsere Homepage-Komponenten durchgeführt, aber wenn ich sie ausführe, bekomme ich den gleichen TypeError: Cannot call a class as a function
Fehler. Beispiel für einfache Komponente:Jest/Enzyme - Kann eine Klasse nicht als Funktion aufrufen
import React, { Component } from 'react'
export default class Intro extends Component {
render() {
const intro = 'this is a test message'
return (
<div>
<p>
{ intro }
</p>
</div>
)
}
}
Super-Basistest:
import React from 'react'
import ReactDOM from 'react-dom'
import Intro from 'Intro'
it('renders without crashing',() => {
const div = document.createElement('div')
ReactDOM.render(<Intro />, div)
})
Dieser Test gibt die zuvor erwähnte TypeError
. Ich glaube, das Problem hängt damit zusammen, wie Jest in Babel/Webpack (v1.12.9) integriert ist, aber ich kann nicht herausfinden, was genau das Thema ist. Hier ist mein babel.rc
:
{
"presets": ["env", "react", "stage-0"],
"plugins": ["transform-runtime", "add-module-exports", "transform-decorators-legacy", "transform-flow-strip-types"]
}
auch fragen, ob vielleicht ist es ein Problem mit Babel Peer Abhängigkeiten? Hier einige relevante Teile von meinem package.json
:
"babel-core": "^6.3.17",
"babel-eslint": "^5.0.0-beta6",
"babel-jest": "^21.2.0",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.0.0",
"babel-preset-stage-0": "^6.3.13",
"babel-register": "^6.3.13",
"babel-runtime": "^6.26.0",
"jest": "^22.0.1",
"jest-cli": "^22.0.0",
"jest-enzyme": "^4.0.1"
Irgendwelche Ideen, was ist der Grund dafür? Kann bei Bedarf mehr Code freigeben.
EDIT: Hier ist mein jest.config.js
:
module.exports = {
moduleFileExtensions: ['js', 'jsx'],
moduleDirectories: ['node_modules'],
moduleNameMapper: {
Intro: '<rootDir>/src/components/Home/Intro.jsx',
styles: '<rootDir>/src/styles/index.js'
},
roots: ['<rootDir>/tests/'],
verbose: true
}
Haben Sie versucht, einen relativen Pfad zum 'Intro' zu verwenden? –
Ja. Ich habe meine Frage mit meiner 'jest.config.js'-Datei geändert und wie ich 'moduleNameWrapper' verwende – wildlifehexagon