簡単なスナップショットテストを試しています。 私がテストしているコンポーネントは、モジュールの別のコンポーネントを使用しています。 このモックされていないモジュールを次のコマンドでインポートしようとすると、テストは失敗します。
失敗
Using Jest CLI v14.1.0, jasmine2, babel-jest, jest-react-native preset
FAIL js/app/SetupView/__tests__/SetupView-test.js (0s)
Runtime Error
- SyntaxError: Unexpected reserved word
at transformAndBuildScript (../../../../../usr/local/lib/node_modules/jest-cli/node_modules/jest-runtime/build/transform.js:306:10)
at Object.<anonymous> (js/app/SetupView/index.js:12:17)
at Object.<anonymous> (js/app/SetupView/__tests__/SetupView-test.js:11:12)
1 test suite failed, 0 tests passed (0 total in 1 test suite, run time 2.419s)
テスト
'use strict';
import 'react-native';
import React from 'react';
import SetupView from '../index';
import renderer from 'react-test-renderer';
describe('SetupView', ()=> {
it('renders correctly', ()=>{
const tree = renderer.create(
<SetupView/>
).toJSON();
expect(tree).toMatchSnapshot();
})
});
SetupViewコンポーネント
'use strict';
import React from 'react';
import {
View,
Text,
TouchableHighlight,
Image,
Animated,
} from 'react-native';
import DataContainer from 'react.datacontainer'; //<---fails here
import DashboardSettings from './DashboardSettings';
.
.
.
package.json
"jest": {
"globals": {
"__DEV__": true
},
"collectCoverage": false,
"verbose": true,
"preset": "jest-react-native",
"modulePathIgnorePatterns": [
"node_modules/react-native/node_modules/yeoman-generator",
"node_modules/react-native/node_modules/fbjs"
],
"unmockedModulePathPatterns": [
"react.datacontainer",
"react.data",
"react.base.theme",
"react.layout"
]
}
参考までに、ルートディレクトリにreact-nativeプリセットを指す.babelrcファイルがあり、テストは実行されますが、 DataContainer
が定義されていないため、12行目をコメントアウトすると失敗します。
jest --no-cache
を試すことができますか? 最後の呼び出しの前にbabelrcを変更した場合、キャッシュが適切に更新されない可能性があります。
それが機能しない場合は、トラブルシューティングのためにnpmインストールとnpmテストができるリポジトリをgithubに作成してください。
ヒント:react-native-presetを使用する場合は、自動モッキングが無効になるため、unmockedModulePathPatternsは必要ありません。
それは私にはうまくいきませんでした。 node_module react.datacontainer
インポートに問題があるようです。 さらに掘り下げた後、jestプリセットはes6で記述されたnode_modulesをコンパイルしていないと思います。
残念ながら、現時点ではリポジトリを作成できません。 しかし、それがさらに役立つ場合は、「react.datacontainer」モジュールがどのように見えるかを次に示します。 https://github.com/ForceDotComLabs/react.force.datacontainer
この構成オプションを使用して、このモジュールの前処理を有効にできます: http ://facebook.github.io/jest/docs/tutorial-react-native.html#preprocessorignorepatterns -customization
必要に応じて、このプロジェクトのgithubページで問題を作成して、依存関係をプリコンパイルし、ビルドファイルをnpmで公開するように依頼することもできます。
最も参考になるコメント
jest --no-cache
を試すことができますか? 最後の呼び出しの前にbabelrcを変更した場合、キャッシュが適切に更新されない可能性があります。それが機能しない場合は、トラブルシューティングのためにnpmインストールとnpmテストができるリポジトリをgithubに作成してください。
ヒント:react-native-presetを使用する場合は、自動モッキングが無効になるため、unmockedModulePathPatternsは必要ありません。