react-native-tab-viewでJestをパスするモック作り
4088 ワード
react-native-tab-viewを使用したコンポーネントをjestでテストする際に以下のエラーが出て、沼ったのでメモを残します。
ちなみに、このライブラリを使用しているコンポーネントをimportするだけでjestではエラーが起こります。
● Test suite failed to run
TypeError: Cannot read property 'Direction' of undefined
at Object.<anonymous> (node_modules/react-native-gesture-handler/Directions.js:3:39)
at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:2:1)
このライブラリをラップしているreact-native-navigationでTabViewを使用している場合にも発生すると思われます。
環境
ライブラリとバージョンは以下です。
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.7.0",
"react-native-tab-view": "^2.13.0",
"@types/jest": "^25.1.4",
"@types/react-native": "^0.61.23",
"@types/react-test-renderer": "^16.9.2",
"jest": "^24.9.0",
"react-native-testing-library": "^1.13.0",
"react-test-renderer": "16.9.0",
対応方法
以下のモックをテストに追加するだけでとりあえずエラーが起きなくなります。
jest.mock('react-native-gesture-handler', () => {
const {View} = require('react-native');
return {
GestureHandlerRootView: () => {
return <View />;
},
};
});
jest.mock('react-native-reanimated', () => {
const mocks = require('react-native-reanimated/mock');
return {
...mocks,
interpolate: true,
};
});
各々モック化するときにundefined扱いになってしまうものがあり、
それらに適当にオブジェクトを設定してあげることで切り抜けることができました。
参考
Author And Source
この問題について(react-native-tab-viewでJestをパスするモック作り), 我々は、より多くの情報をここで見つけました https://qiita.com/ceder5532/items/a31592a5cfe64ebe2edf著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .