Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React: App tests fail for CRA/Jest

See original GitHub issue
  • 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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:10
  • Comments:14

github_iconTop GitHub Comments

4reactions
burtontannercommented, Oct 18, 2019

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

3reactions
GimpMastercommented, Aug 28, 2019

Us too. +1.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest with Create React App: Test suite failed to run
Out of the box create-react-app with jest is always failing. Steps I did create-react-app cra-test cd cra-test yarn install.
Read more >
Running Tests
Create React App uses Jest as its test runner. ... For example, if App.test.js and App.js are in the same folder, the test...
Read more >
Testing a Create React App TypeScript Project with Jest ...
When you run the tests, you will notice that this test fails. TestingLibraryElementError: Unable to find an element with the text: /^edit src/ ......
Read more >
Blog | Jest Preview
CRA is well known for bootstrapping a React App. It hides the complexity of ... preview the UI of your app WHENEVER a...
Read more >
How To Test a React App with Jest and React Testing Library
Because Jest is pre-packaged with Create React App, you do not need to install it separately. ... Press f to run only failed...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Spinner does not work in Popup

Next page

Webview Not Responding - Bug in iOS 12 and other versions