2017-12-18 30 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가 설정 한 방식에 있었다 밝혀졌습니다. 새 테스트 폴더를 만드는 대신 초기 디렉터리에 테스트 파일을 포함하여 폴더 구조를 변경했습니다. 나 또한 내 농담 설정을 package.json으로 옮기고 거기에 약간의 변화를주었습니다. 이제 나는 실패한 테스트를하고 있지만 예상했던대로 진행합니다.