using Typescript / ts-jest transform issue w/ default exports #5303

vincentbriglia · 2018-11-28T22:08:56Z

uncertain why this is happening, been trying to debug this for some time. repro repository below, have not had any other 3rd party component error out with the same default import in larger projects.

repro here: https://github.com/vincentbriglia/jesttest

yarn run v1.12.3
$ jest
 FAIL  src/__tests__/App.tsx
  ✕ renders correctly (54ms)

  ● renders correctly

    TypeError: Cannot read property 'default' of undefined

      at new KeyboardAwareNavigator (node_modules/@react-navigation/native/dist/createKeyboardAwareNavigator.js:4:527)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4810:18)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6579:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7413:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10138:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10170:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10256:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11121:7)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11033:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11007:3)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
    The above error occurred in the <KeyboardAwareNavigator> component:
        in KeyboardAwareNavigator (at createAppContainer.js:326)
        in NavigationContainer (created by App)
        in App

    React will try to recreate this component tree from scratch using the error boundary you provided, NavigationContainer.

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
    The above error occurred in the <NavigationContainer> component:
        in NavigationContainer (created by App)
        in App

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.081s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Your Environment

OS: macOS Mojave 10.14 (18A391)

software	version
react-navigation	3.0.2
react-native	0.57.15
node	10.12.0
yarn	1.12.3

vincentbriglia · 2018-11-29T08:51:58Z

and even though that jest tries to get the dist folder, I get the same using the src folder

$ jest
 FAIL  src/__tests__/App.tsx
  ✕ renders correctly (60ms)

  ● renders correctly

    TypeError: Cannot read property 'default' of undefined

      at new KeyboardAwareNavigator (node_modules/@react-navigation/native/src/createKeyboardAwareNavigator.js:4:527)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4810:18)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6579:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7413:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10138:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10170:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10256:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11121:7)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11033:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11007:3)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
    The above error occurred in the <KeyboardAwareNavigator> component:
        in KeyboardAwareNavigator (at createAppContainer.js:388)
        in NavigationContainer (created by App)
        in App

    React will try to recreate this component tree from scratch using the error boundary you provided, NavigationContainer.

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
    The above error occurred in the <NavigationContainer> component:
        in NavigationContainer (created by App)
        in App

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.299s
Ran all test suites.
error Command failed with exit code 1.

brentvatne · 2018-11-29T21:44:16Z

hi there! sorry you're having an issue. as the issue template explains, we require that you provide a runnable example that reproduces the bug on https://snack.expo.io or in a github repository. please try to minimize the superfluous code and focus only on reproducing the bug.

you might wonder, why are we strict about this? the reason is that there are only a small number of maintainers on this project and there are hundreds of people who report issues. if it takes us 20 minutes on average to reproduce each issue and we go through 10 issues each day, that's about half of our day just trying to reproduce bugs, without even beginning to investigate solutions. compare that to 20 minutes for each person who reports an issue.

please create a new issue with this and i'd be happy to review it!

vincentbriglia · 2018-11-30T05:10:10Z

Hi @brentvatne I have submitted a reproducible repository in the first comment . Since this is a testing issue I cannot submit a snack

brentvatne · 2018-11-30T19:17:55Z

hey @vincentbriglia - sorry for that. nonetheless we can't help debug issues with configuration like this, you'd be better off asking on ts-jest or some typescript related repository. when you are certain you have found an issue with react-navigation then come here and report precisely what it is :)

RWOverdijk · 2019-01-31T14:18:25Z

@vincentbriglia Did you find the answer?

jdnichollsc · 2019-06-27T04:31:45Z

@vincentbriglia did you find any solution? :)

vincentbriglia · 2019-06-27T06:04:39Z

I didn’t end up finding a solution using ts-jest - we stopped using ts-jest altogether after some other issues and focused instead on using Babel. Not ideal due to its known documented limitations with const enums etc... but we had to move forward

mtt87 · 2019-11-04T15:42:38Z

I'm having the same issue with Typescript and I wonder how did you manage to solve it @vincentbriglia ? Would you be so nice to show me your config?

TypeError: Cannot read property 'default' of undefined

      at new KeyboardAwareNavigator (node_modules/@react-navigation/native/dist/createKeyboardAwareNavigator.js:4:527)

brunompl · 2019-11-05T10:41:38Z

@mtt87 on package.json on jest.transform if you have "^.+\.js$": "/node_modules/react-native/jest/preprocessor.js" try removing it. It worked for me.

I followed this thread to find this solution: facebook/react-native#22175

mtt87 · 2019-11-05T11:31:57Z

This is what I have now and it is working, and yes I also removed that line you mentioned.

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|@react-native-community|react-navigation|react-navigation-tabs|react-navigation-stack|@react-navigation/.*|react-native-svg)"
    ],
    "roots": [
      "__tests__",
      "__mocks__"
    ],
    "testRegex": "(/__tests__/.*(\\.|/)(test|spec))\\.[jt]sx?$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "setupFiles": [
      "./jest.setup.js"
    ]
  }

And this is the jest.setup.js

jest.mock('react-native-gesture-handler', () => {
  const View = require('react-native/Libraries/Components/View/View');
  return {
    Swipeable: View,
    DrawerLayout: View,
    State: {},
    ScrollView: View,
    Slider: View,
    Switch: View,
    TextInput: View,
    ToolbarAndroid: View,
    ViewPagerAndroid: View,
    DrawerLayoutAndroid: View,
    WebView: View,
    NativeViewGestureHandler: View,
    TapGestureHandler: View,
    FlingGestureHandler: View,
    ForceTouchGestureHandler: View,
    LongPressGestureHandler: View,
    PanGestureHandler: View,
    PinchGestureHandler: View,
    RotationGestureHandler: View,
    /* Buttons */
    RawButton: View,
    BaseButton: View,
    RectButton: View,
    BorderlessButton: View,
    /* Other */
    FlatList: View,
    gestureHandlerRootHOC: jest.fn(),
    Directions: {},
  };
});

jest.mock('react-native-reanimated', () => {
  const { View } = require('react-native');
  return {
    Value: jest.fn(),
    event: jest.fn(),
    add: jest.fn(),
    eq: jest.fn(),
    set: jest.fn(),
    cond: jest.fn(),
    interpolate: jest.fn(),
    View,
    Extrapolate: { CLAMP: jest.fn() },
    Transition: {
      Together: 'Together',
      Out: 'Out',
      In: 'In',
    },
    Easing: {
      in: jest.fn(),
      out: jest.fn(),
      inOut: jest.fn(),
    },
  };
});

brunompl · 2019-11-05T11:38:05Z

@mtt87 for 'react-native-reanimated' you can just use:
jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));

and for 'react-native-gesture-handler' you can add to your setupFiles section on package.json this: "./node_modules/react-native-gesture-handler/jestSetup.js",

mtt87 · 2019-11-05T11:45:15Z

That's fantastic, even better thank you very much.

This is the kind of stuff that it should be on the react navigation website.

I will make a PR as soon as I can 😄

XmlmXmlmX · 2020-05-19T07:28:31Z

So TypeScript is not supported?

brentvatne closed this as completed Nov 29, 2018

mtt87 mentioned this issue Nov 4, 2019

Guide for using TypeScript with React Navigation react-navigation/react-navigation.github.io#16

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

using Typescript / ts-jest transform issue w/ default exports #5303

using Typescript / ts-jest transform issue w/ default exports #5303

vincentbriglia commented Nov 28, 2018

vincentbriglia commented Nov 29, 2018

brentvatne commented Nov 29, 2018

vincentbriglia commented Nov 30, 2018

brentvatne commented Nov 30, 2018

RWOverdijk commented Jan 31, 2019

jdnichollsc commented Jun 27, 2019 •

edited

Loading

vincentbriglia commented Jun 27, 2019

mtt87 commented Nov 4, 2019

brunompl commented Nov 5, 2019

mtt87 commented Nov 5, 2019 •

edited

Loading

brunompl commented Nov 5, 2019 •

edited

Loading

mtt87 commented Nov 5, 2019

XmlmXmlmX commented May 19, 2020

using Typescript / ts-jest transform issue w/ default exports #5303

using Typescript / ts-jest transform issue w/ default exports #5303

Comments

vincentbriglia commented Nov 28, 2018

Your Environment

vincentbriglia commented Nov 29, 2018

brentvatne commented Nov 29, 2018

vincentbriglia commented Nov 30, 2018

brentvatne commented Nov 30, 2018

RWOverdijk commented Jan 31, 2019

jdnichollsc commented Jun 27, 2019 • edited Loading

vincentbriglia commented Jun 27, 2019

mtt87 commented Nov 4, 2019

brunompl commented Nov 5, 2019

mtt87 commented Nov 5, 2019 • edited Loading

brunompl commented Nov 5, 2019 • edited Loading

mtt87 commented Nov 5, 2019

XmlmXmlmX commented May 19, 2020

jdnichollsc commented Jun 27, 2019 •

edited

Loading

mtt87 commented Nov 5, 2019 •

edited

Loading

brunompl commented Nov 5, 2019 •

edited

Loading