2017-12-18 39 views
0

大規模なアプリケーションをKarma/MochaからJestに移行してテストしています。私はホームページコンポーネントのためのいくつかの本当に基本的なテストを設定しましたが、私がそれらを実行すると、同じTypeError: Cannot call a class as a functionエラーが発生します。単純なコンポーネントの例:Jest/Enzyme - クラスを関数として呼び出せません。

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> 
     ) 
    } 
} 

スーパー基本的なテスト:

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) 
}) 

このテストでは、前述のTypeErrorを与えます。私はJestがBabel/Webpack(v1.12.9)とどのように統合されているかについて問題があると考えていますが、具体的に何が問題なのかわかりません。ここに私のbabel.rcです:多分それはバベルピアの依存関係の問題だ場合

{ 
    "presets": ["env", "react", "stage-0"], 
    "plugins": ["transform-runtime", "add-module-exports", "transform-decorators-legacy", "transform-flow-strip-types"] 
} 

も不思議? 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" 

何が原因なのですか?必要に応じてより多くのコードを共有することができます。

編集:ここに私の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

「Intro」への相対パスを使用してみましたか? –

+0

はい。私は自分の 'jest.config.js'ファイルで私の質問を修正しました。どのように' moduleNameWrapper'を使用していますか? – wildlifehexagon

答えて

0

それは問題は私がmoduleNameMapperを設定していた方法で判明しました。新しいテストフォルダを作成するのではなく、最初のディレクトリにテストファイルを含めてフォルダ構造を変更しました。私はまた、自分のJestの設定をpackage.jsonに移してそこに少し変更を加えました。今、私は期待していた方法でテストに失敗しています。

関連する問題