callstack / callstack/react-native-paper

Exception is thrown during Jest test when using Paper components.

Open
#4,373 2 comments 1 reaction 0 assignees View on GitHub
bug testing
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour
Using the library's components results in exception being thrown when running tests with Jest.

```
C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:2611
throw error;
^

TypeError: Cannot read properties of undefined (reading 'addEventListener')
at addEventListener (C:\ReactNativePaperJestTest\node_modules\react-native-paper\src\utils\addEventListener.tsx:19:31)
at C:\ReactNativePaperJestTest\node_modules\react-native-paper\src\core\PaperProvider.tsx:47:38
at commitHookEffectListMount (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:12999:26)
at commitPassiveMountOnFiber (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14422:11)
at commitPassiveMountEffects_complete (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14382:9)
at commitPassiveMountEffects_begin (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14369:7)
at commitPassiveMountEffects (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14357:3)
at flushPassiveEffectsImpl (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16248:3)
at flushPassiveEffects (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16197:14)
at C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16012:9
at workLoop (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\node_modules\scheduler\cjs\scheduler.development.js:266:34)
at flushWork (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\node_modules\scheduler\cjs\scheduler.development.js:239:14)
at Immediate.performWorkUntilDeadline (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\node_modules\scheduler\cjs\scheduler.development.js:533:21)
at processImmediate (node:internal/timers:478:21)

Node.js v20.12.0
```

### Expected behaviour
The test should run with no exceptions.

### How to reproduce?
1. Create new app with `npx react-native@latest init ReactNativePaperJestTest`
2. Go through the library's setup, as per [the docs](https://callstack.github.io/react-native-paper/docs/guides/getting-started/)
3. Add the `PaperProvider` component to the app
4. Run the tests with `npm test`

Alternatively, check out this [GitHub repo](https://github.com/rafabulsing/react-native-paper-jest-test).

### What have you tried so far?
Adding the following to `jest.config.js`:
```
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-paper)/)',
],
```

causes the error to change a bit:

```
C:\ReactNativePaperJestTest\node_modules\flow-parser\flow_parser.js:818
throw a}function
^

TypeError: Cannot read properties of undefined (reading 'addEventListener')
at addEventListener (C:\ReactNativePaperJestTest\node_modules\react-native-paper\src\utils\addEventListener.tsx:20:19)
at C:\ReactNativePaperJestTest\node_modules\react-native-paper\src\core\PaperProvider.tsx:100:39
at commitHookEffectListMount (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:12999:26)
at commitPassiveMountOnFiber (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14422:11)
at commitPassiveMountEffects_complete (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14382:9)
at commitPassiveMountEffects_begin (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14369:7)
at commitPassiveMountEffects (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:14357:3)
at flushPassiveEffectsImpl (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16248:3)
at flushPassiveEffects (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16197:14)
at C:\ReactNativePaperJestTest\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:16012:9
at workLoop (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\node_modules\scheduler\cjs\scheduler.development.js:266:34)
at flushWork (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\node_modules\scheduler\cjs\scheduler.development.js:239:14)
at Immediate.performWorkUntilDeadline (C:\ReactNativePaperJestTest\node_modules\react-test-renderer\node_modules\scheduler\cjs\scheduler.development.js:533:21)
at processImmediate (node:internal/timers:478:21)

Node.js v20.12.0
```

### Your Environment

| software | version
| --------------------- | -------
| react-native | 0.73.6
| react-native-paper | 5.12.3
| node | 20.12.0
| npm | 10.5.0

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.