jest-expo - Unit tests failing after upgrade to react navigation 5

Please provide the following:

  1. SDK Version: Expo 35
  2. Platforms(Android/iOS/web/all): all

Hi, I recently upgraded the navigation version in my project to react navigation 5. All the unit test were failing. So I upgraded jest-expo to 36.0.1.
Now some of the tests are working but it still fails in files which import from ‘@react-navigation/stack’.
For eg: In a file with import as:

import { HeaderBackButton } from '@react-navigation/stack'
I get this error

● Test suite failed to run
 TypeError: Cannot read property 'split' of undefined
      at Object.global (../node_modules/@react-navigation/stack/lib/commonjs/views/Stack/CardStack.tsx:41:26)

      at Object.<anonymous> (../node_modules/@react-navigation/stack/lib/commonjs/views/Stack/StackView.tsx:11:1)

I am not able to move past this issue. Please advise.
@adamjnav @jess @wodin

It seems to work if I comment out the import statement from the main file (but we cant do that in production)
So, tried to ignore the import statement while running the test file by adding below code to config file.

"transformIgnorePatterns": [
          "node_modules/(?!(jest-)?@react-navigation/.*)"
]

Unfortunately, it doesn’t seem to work as well. It is giving me an error.
@wodin

@wodin any update on this issue?

Hi @trinet

Sorry, I have not yet used jest-expo or React Navigation 5.x.

But if I install React Navigation v5 and @react-navigation/stack I don’t see the file mentioned in your error message.

Instead of CardStack.tsx I have CardStack.js. Any idea why that might be?

There is a CardStack.tsx in the following location, though:

node_modules/@react-navigation/stack/src/views/Stack/CardStack.tsx

(i.e. src instead of lib/commonjs)

I can’t make sense of the original error.

On line 11 of src/views/Stack/StackView.tsx there is an import statement for CardStack.tsx, so that makes sense at least. But then line 41 of CardStack.tsx the second line of this:

type Props = {
  mode: StackCardMode;
  insets: EdgeInsets;

I don’t understand how that could give the Cannot read property 'split' of undefined error. Also there is no .split() call anywhere in that file.

I’m not quite sure what transformIgnorePatterns is meant to do, but try this pattern instead:

node_modules/((?!(jest-))?@react-navigation/.*)

https://www.regextester.com/?fam=115053

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.