テストプロジェクトに反応するnpmテストは動作しますがjestはありません

Question

私はcreate-react-appを使用して新しいreactアプリケーションを作成し、いくつかの単純なコンポーネントとテストを追加しました。 'npm test'を使ってテストを実行すると、正常に動作します。テスト中にインポートされたコンポーネントを使用する場合、jestを実行すると「予期しないトークン」が表示されます。例：

import React from 'react'; 
import { shallow } from 'enzyme'; 
import App from './App'; 

it('renders without crashing',() => { 
    shallow(<App />); 
}); 

テスト中にAppを使用するとエラーが発生しますが、実行中のテストはエラーが発生します。

Answer 1

unexpected tokenは、babel-jestをインストールしておらず、キーをjest.jsonに追加していない可能性があります。私は、あなたがすべてのconfigsを見ることができるように、私は

など元に戻すことはできません「 eject」アプリを（）いただきたいか、あなたがあなた自身のjest.jsonを追加することができます）createReactApp is doing something to hide this from you. If you want to use non-createReactApp commands (like jest`を期待するが、私はこれを感じますテストを実行する2つの方法が混乱する可能性があります。

Answer 2

これ以上の制御が必要な場合は、箱の外に出てくるものをバイパスすることをお勧めします。create-react-app

にtestというエントリを追加できます。このエントリは基本的にjestを使用しますが、設定ファイルを渡すことができます。

"scripts": { 
    ... 
    "test": "jest --config jest.conf.js", 
    ... 
    }, 

jest.conf.jsでは、テストで使用する変数を追加できます。 collectCoverageとcoverageDirectoryの属性はコードカバレッジのためのものです。 npm run testを実行するときに

{ 
    "globals":{ 
    "__DEV__": true, 
    "API_BASE_URL": "http://api", 
    "SOME_VAR": "whatever" 
    "unmockedModulePathPatterns": [ 
     "node_modules/react/", 
     "node_modules/enzyme/" 
    ] 
    }, 
    "collectCoverage": "true", 
    "coverageDirectory": "coverage" 
} 

その後、それはカスタム設定で、jestを使用してテストを実行します。