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扱いになってしまうものがあり、
それらに適当にオブジェクトを設定してあげることで切り抜けることができました。