大規模なアプリケーションを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
}
「Intro」への相対パスを使用してみましたか? –
はい。私は自分の 'jest.config.js'ファイルで私の質問を修正しました。どのように' moduleNameWrapper'を使用していますか? – wildlifehexagon