Framework7: React: App tests fail for CRA/Jest

[rafamel]

• Framework7 version: 4.4.10
• React.js version: 16.8.6

Describe the bug

Using framework7-react on a CRA project causes tests to fail. This also holds true when transpiling framework7 and framework7-react in full.

To Reproduce

Steps to reproduce the behavior:

1. Run npx create-react-app f7-react-fail && cd f7-react-fail && npm install framework7 framework7-react
2. Use the framework7-react App component in the app.
3. Run tests via npm t
4. Alternatively, you can just clone this repo and run npm i && npm t on it.

Expected behavior

Tests should not fail when using framework7-react.

Actual Behavior

Tests fail when using framework7-react.

Additional context

 FAIL  test/App.test.tsx
  ✕ renders without crashing (46ms)

  ● renders without crashing

    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check the render method of `App`.

       5 | test('renders without crashing', () => {
       6 |   const div = document.createElement('div');
    >  7 |   ReactDOM.render(<App />, div);
         |            ^
       8 |   ReactDOM.unmountComponentAtNode(div);
       9 | });
      10 | 

      at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15)
      at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:10217:11)
      at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:10238:15)
      at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:12531:23)
      at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:12588:35)
      at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:14402:28)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:15064:5)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:15625:16)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:19312:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:19352:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:19435:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:20342:7)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:20254:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:20228:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:20097:5)
      at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:19911:5)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:20572:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:20600:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:20657:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:20953:3)
      at node_modules/react-dom/cjs/react-dom.development.js:21090:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:20459:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:21086:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:21155:12)
      at Object.render (test/App.test.tsx:7:12)

  console.error node_modules/react/cjs/react.development.js:188
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check your code at App.tsx:90.
        in App (at App.test.tsx:7)

  console.error node_modules/react/cjs/react.development.js:188
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check your code at App.tsx:90.
        in App (at App.test.tsx:7)

  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check the render method of `App`.]
        at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:199:16)
        at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:256:31)
        at replayUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:18578:5)
        at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:19468:13) { Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check the render method of `App`.
        at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15)
        at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:10217:11)
        at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:10238:15)
        at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:12531:23)
        at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:12588:35)
        at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:14402:28)
        at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:15064:5)
        at beginWork (node_modules/react-dom/cjs/react-dom.development.js:15625:16)
        at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:19312:12)
        at workLoop (node_modules/react-dom/cjs/react-dom.development.js:19352:24)
        at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:149:14)
        at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:199:16)
        at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:256:31)
        at replayUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:18578:5)
        at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:19468:13)
        at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:20342:7)
        at performWork (node_modules/react-dom/cjs/react-dom.development.js:20254:7)
        at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:20228:3)
        at requestWork (node_modules/react-dom/cjs/react-dom.development.js:20097:5)
        at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:19911:5)
        at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:20572:3)
        at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:20600:10)
        at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:20657:10)
        at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:20953:3)
        at node_modules/react-dom/cjs/react-dom.development.js:21090:14
        at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:20459:10)
        at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:21086:5)
        at Object.render (node_modules/react-dom/cjs/react-dom.development.js:21155:12)
        at Object.render (test/App.test.tsx:7:12)
        at Object.asyncJestTest (node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:189:7) name: 'Invariant Violation', framesToPop: 1 }

  console.error node_modules/react-dom/cjs/react-dom.development.js:17117
    The above error occurred in the <App> component:
        in App (at App.test.tsx:7)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

[burtontanner]

@nolimits4web what are you thoughts on this? we would love to use jest with CRA as well.

[GimpMaster]

Us too. +1.

[rafamel]

@nolimits4web any thoughts on this one?

[burtontanner]

I want to keep using framework7 but I don't know if I can without unit tests : /

[mjwvb]

Having the exact same problem using F7 version 5.1.3

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[DCCSReschAndreas]

Any updates on this topic?
I am using framework7 5.4.0 & framework7-react 5.4.0 and experiencing the same problem.

[ahouchens]

Hmm. The only workaround I'm pursuing now is to mock out the framework7 components inside of my Jest + Enzyme tests...

[burtontanner]

@ahouchens that’s what we ended up doing.

[burtontanner]

https://bit.dev/redsky/framework/rs/996

[ahouchens]

@burtontanner How did you end up writing meaningful tests if you had to stub out all of the framework7 components?

It's difficult to assert or interact with a form built with framework7 components in a test if they are all stubbed out.

[burtontanner]

@ahouchens I don't think I was very clear. We don't use their form components, we have our own. The main things we use are Popup, Page, View, and Navbar. Since those components don't affect unit tests that much they were easier to mock. Eventually we moved away from framework7 and made our own internal framework that we control. This has been an investment for sure but I couldn't be happier.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.