Search code examples
react-nativereact-router-v4react-test-rendererreact-router-native

Test using react-router-native's Link blows up with "TypeError: Cannot read property 'default' of undefined"


For a react-native app using react-router, jest and react-test-renderer, the <Link> component doesn't seem to be testable. The react-router documentation makes no mention of having to do anything special (mocking?) for react-native and my tests only blow up when the react-router's <Link> component is included in the tree being rendered. Other components (e.g. <Text>, <Router>) do not have this problem.

This basic react-native project reproduces the exploding test. The app otherwise builds and behaves as expected inside a phone.

Do I have a configuration problem? Is it undocumented, or did I just overlook it? Or should I give up and switch to using enzyme? Would that even help?

Here's the salient test output:

  TypeError: Cannot read property 'default' of undefined
      at new Link (minimal-bug-repro/node_modules/react-router-native/Link.js:5:379)
      at constructClassInstance (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3438:22)                                                                                                                                
      at updateClassComponent (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6764:9)                                                                                                                                   
      at beginWork (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7721:20)
      at performUnitOfWork (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11392:16)                                                                                                                                    
      at workLoop (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11424:28)
      at renderRoot (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11507:11)                                                                                                                                           
      at performWorkOnRoot (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12395:11)                                                                                                                                    
      at performWork (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12307:11)                                                                                                                                          
      at performSyncWork (minimal-bug-repro/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12281:7) { componentStack:                                                                                                                     

Solution

  • Upgrade jest to >= 24.0.0, remove the transform: section of the jest.config.js, and switch to a plain preset: 'react-native'.