2017-12-18 6 views
0

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 
} 
+0

Haben Sie versucht, einen relativen Pfad zum 'Intro' zu verwenden? –

+0

Ja. Ich habe meine Frage mit meiner 'jest.config.js'-Datei geändert und wie ich 'moduleNameWrapper' verwende – wildlifehexagon

Antwort

0

Es stellt sich heraus, das Problem mit der Art und Weise war ich hatte moduleNameMapper eingerichtet. Ich habe meine Ordnerstruktur geändert, indem ich die Testdateien in ihr Anfangsverzeichnis aufgenommen habe, anstatt einen neuen Testordner zu erstellen. Ich habe auch meine Jest-Konfiguration auf package.json verschoben und dort ein paar kleine Änderungen vorgenommen. Jetzt bekomme ich versagende Tests, aber auf eine Weise, die ich erwartet hatte.

Verwandte Themen