search

grapp-dev / stacks

A set of components for building layouts in React Native. Powered by React Native Unistyles.
https://stacks.grapp.dev
MIT License
982 stars 24 forks source link

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

Closed gciluffo closed 2 years ago

gciluffo commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@gciluffo fixed and published in v2.1.0 🚀

gciluffo commented 2 years ago

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