Jest: スナップショットテストのインポートがbabel-presetで機能しない

作成日 2016年08月15日  ·  3コメント  ·  ソース: facebook/jest

簡単なスナップショットテストを試しています。 私がテストしているコンポーネントは、モジュールの別のコンポーネントを使用しています。 このモックされていないモジュールを次のコマンドでインポートしようとすると、テストは失敗します。

失敗

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は必要ありません。

全てのコメント3件

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で公開するように依頼することもできます。

このページは役に立ちましたか?
0 / 5 - 0 評価