Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issues with testing-library, jest, and react native web #35

Closed
gciluffo opened this issue May 4, 2022 · 5 comments
Closed

Issues with testing-library, jest, and react native web #35

gciluffo opened this issue May 4, 2022 · 5 comments
Assignees
@mobily

Comments

@gciluffo
Copy link

gciluffo commented May 4, 2022

Hi, im currently running into issue with running snapshot tests using react testing library and react native web. I am trying to have separate tests for both native and web by having two different jest configs. The native tests (with jest preset react-native) run fine with Mobily components but seems to break when running under the web configuration (jest preset react-native-web).

Here is an example repo with the issue: https://github.com/gciluffo/react-native-web

➜  ReactNativeWeb git:(main) yarn test:web
yarn run v1.22.17
$ PLATFORM=web jest --config jest.web.config.js --forceExit
 FAIL  src/screens/NoteDetail/__tests__/NoteDetail.web.test.tsx
  ✕ renders correctly (55 ms)

  ● renders correctly

    thrown: Object {
      "Error": [Error],
      "RE_EXN_ID": "Not_found",
    }

       8 | import {render} from '../../../../jest/createMockWebApp';
       9 |
    > 10 | it('renders correctly', () => {
         | ^
      11 |   const NoteDetailScreen = render(<NoteDetail />);
      12 |   expect(NoteDetailScreen).toMatchSnapshot();
      13 | });

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Object.<anonymous> (src/screens/NoteDetail/__tests__/NoteDetail.web.test.tsx:10:1)

  console.error
    Error: Uncaught {
      RE_EXN_ID: 'Not_found',
      Error: Error: 
          at getExn (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:97:12)
          at resolveCurrentBreakpoint (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:435:10)
          at useCurrentBreakpoint (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:635:10)
          at Stacks_component_Box (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:1062:27)
          at renderWithHooks (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
          at mountIndeterminateComponent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
          at beginWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
          at HTMLUnknownElement.callCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
          at invokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
          at workLoopSync (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
          at renderRootSync (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
          at performSyncWorkOnRoot (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
          at scheduleUpdateOnFiber (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
          at updateContainer (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26021:7
          at unbatchedUpdates (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
          at legacyRenderSubtreeIntoContainer (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
          at Object.render (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@testing-library/react/dist/pure.js:101:25
          at batchedUpdates$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
          at act (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
          at render (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@testing-library/react/dist/pure.js:97:26)
          at customRender (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/jest/createMockWebApp.tsx:12:6)
          at Object.<anonymous> (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/src/screens/NoteDetail/__tests__/NoteDetail.web.test.tsx:11:28)
          at Object.asyncJestTest (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:45:12
          at new Promise (<anonymous>)
          at mapper (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:75:41
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
    }
        at reportException (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
        at invokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at beginWork$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
        at performUnitOfWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22779:12) {
      RE_EXN_ID: 'Not_found',
      Error: Error: 
          at getExn (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:97:12)
          at resolveCurrentBreakpoint (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:435:10)
          at useCurrentBreakpoint (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:635:10)
          at Stacks_component_Box (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:1062:27)
          at renderWithHooks (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
          at mountIndeterminateComponent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
          at beginWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
          at HTMLUnknownElement.callCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
          at invokeEventListeners (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
          at workLoopSync (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
          at renderRootSync (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
          at performSyncWorkOnRoot (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
          at scheduleUpdateOnFiber (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
          at updateContainer (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26021:7
          at unbatchedUpdates (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
          at legacyRenderSubtreeIntoContainer (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
          at Object.render (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@testing-library/react/dist/pure.js:101:25
          at batchedUpdates$1 (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
          at act (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
          at render (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@testing-library/react/dist/pure.js:97:26)
          at customRender (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/jest/createMockWebApp.tsx:12:6)
          at Object.<anonymous> (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/src/screens/NoteDetail/__tests__/NoteDetail.web.test.tsx:11:28)
          at Object.asyncJestTest (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:45:12
          at new Promise (<anonymous>)
          at mapper (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
          at /Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/jest-jasmine2/build/queueRunner.js:75:41
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
    }

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)

  console.error
    The above error occurred in the <Stacks_component_Box> component:
    
        at Stacks_component_Box (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:1032:24)
        at Stacks_component_Stack (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:1218:21)
        at NoteDetail
        at Stacks_component_Provider (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/node_modules/@mobily/stacks/dist/cjs/index.js:2339:26)
        at AllTheProviders (/Users/griffinciluffo/Homee/sandbox/ReactNativeWeb/jest/createMockWebApp.tsx:5:31)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)

Im not sure if this is an issue with Mobily + test-library + react native web or im just not configuring my jest.web.config.js file correctly. Any insight would be appreciated!
@mobily
Copy link
Collaborator

mobily commented May 5, 2022

hello @gciluffo 👋 I'm thinking that your jest.web.config.js may need some tweaks, I will be happy to help if you create a repo with a reproduction (also, do you use the latest version of Stacks?)

@gciluffo
Copy link
Author

gciluffo commented May 5, 2022

@mobily Yeah thats what im thinking too. And yes am using the latest version.

Repo: https://github.com/gciluffo/react-native-web and just yarn && yarn test:web to reproduce.

@mobily mobily self-assigned this May 8, 2022
@mobily
Copy link
Collaborator

mobily commented May 10, 2022

@gciluffo thanks for the repo! ❤️ I've already found a place in code that causes this bug and it will be fixed in the next release (I'm gonna publish it this week), I will let you know! 🚀

@mobily
Copy link
Collaborator

mobily commented Jun 5, 2022

@gciluffo fixed and published in v2.1.0 🚀

@mobily mobily closed this as completed Jun 5, 2022
@gciluffo
Copy link
Author

gciluffo commented Jun 8, 2022

@mobily Looks good, thank you for getting to this so fast!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mobily mobily

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mobily @gciluffo