App init test failing

Yassin · 5 October 2021 09:38

Hi

I am facing an issue with a newly init’d app. The implemented unit test fails.

I’m using node v16.10.0 and d2 4.0.5.

Gassim · 6 October 2021 14:54

Hey, welcome to the community @Yassin, and thank you for your post!

I tried and got the same result so hopefully we’ll get an answer soon! (:

@Yassin, I had the same issue so I uninstalled docker and then installed it again, and I installed node.js and yarn again - now d2 app scripts init is working.

Yassin · 12 October 2021 09:37

Hi @Gassim,

Thanks for the reply.

Are you able to successfully run yarn test in the created project?

Gassim · 12 October 2021 13:28

Yes, but you can also try to use yarn run test and see if it works!

Yassin · 13 October 2021 07:43

Here is my yarn run test:

yarn run v1.22.5
$ d2-app-scripts test
Running tests... 
 FAIL  src/App.test.js
  ● Console

    console.error
      Error: Uncaught [Error: No QueryClient set, use QueryClientProvider to set one]
          at reportException (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
          at innerInvokeEventListeners (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
          at invokeEventListeners (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:237:16)
          at invokeGuardedCallback (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:292:31)
          at beginWork$1 (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
          at performUnitOfWork (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:22157:12)
          at workLoopSync (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:22130:22)
          at performSyncWorkOnRoot (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:21756:9)
          at scheduleUpdateOnFiber (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:21188:7)
          at updateContainer (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:24373:3)
          at /home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:24758:7
          at unbatchedUpdates (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:21903:12) Error: No QueryClient set, use QueryClientProvider to set one
          at useQueryClient (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-query/lib/react/QueryClientProvider.js:36:11)
          at useBaseQuery (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-query/lib/react/useBaseQuery.js:24:61)
          at useQuery (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-query/lib/react/useQuery.js:14:41)
          at useDataQuery (/home/yassin/Projects/misau-gbv-dhis2/node_modules/@dhis2/app-service-data/build/cjs/react/hooks/useDataQuery.js:91:32)
          at DataQuery (/home/yassin/Projects/misau-gbv-dhis2/node_modules/@dhis2/app-service-data/build/cjs/react/components/DataQuery.js:18:53)
          at renderWithHooks (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:14803:18)
          at mountIndeterminateComponent (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:17482:13)
          at beginWork (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:18596:16)
          at HTMLUnknownElement.callCallback (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:188:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
          at invokeEventListeners (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/home/yassin/Projects/misau-gbv-dhis2/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:237:16)
          at invokeGuardedCallback (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:292:31)
          at beginWork$1 (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
          at performUnitOfWork (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:22157:12)
          at workLoopSync (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:22130:22)
          at performSyncWorkOnRoot (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:21756:9)
          at scheduleUpdateOnFiber (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:21188:7)
          at updateContainer (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:24373:3)
          at /home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:24758:7
          at unbatchedUpdates (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:21903:12)
          at legacyRenderSubtreeIntoContainer (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:24757:5)
          at Object.render (/home/yassin/Projects/misau-gbv-dhis2/node_modules/react-dom/cjs/react-dom.development.js:24840:10)
          at Object.<anonymous>.it (/home/yassin/Projects/misau-gbv-dhis2/src/App.test.js:7:14)
          at Promise (/home/yassin/Projects/misau-gbv-dhis2/node_modules/@dhis2/cli-app-scripts/node_modules/jest-circus/build/utils.js:390:28)
          at new Promise (<anonymous>)
          at callAsyncCircusFn (/home/yassin/Projects/misau-gbv-dhis2/node_modules/@dhis2/cli-app-scripts/node_modules/jest-circus/build/utils.js:315:10)
          at _callCircusTest (/home/yassin/Projects/misau-gbv-dhis2/node_modules/@dhis2/cli-app-scripts/node_modules/jest-circus/build/run.js:218:40)
          at process._tickCallback (internal/process/next_tick.js:68:7)

      at VirtualConsole.on.e (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)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)

    console.error
      The above error occurred in the <DataQuery> component:
          in DataQuery (created by MyApp)
          in div (created by MyApp)
          in MyApp
      
      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.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:19527:21)
      at logError (node_modules/react-dom/cjs/react-dom.development.js:19564:5)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20708:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12490:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12511:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:19883:11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:22803:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      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)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)

  ● renders without crashing

    No QueryClient set, use QueryClientProvider to set one

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

      at useQueryClient (node_modules/react-query/lib/react/QueryClientProvider.js:36:11)
      at useBaseQuery (node_modules/react-query/lib/react/useBaseQuery.js:24:61)
      at useQuery (node_modules/react-query/lib/react/useQuery.js:14:41)
      at useDataQuery (node_modules/@dhis2/app-service-data/build/cjs/react/hooks/useDataQuery.js:91:32)
      at DataQuery (node_modules/@dhis2/app-service-data/build/cjs/react/components/DataQuery.js:18:53)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14803:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17482:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:18596:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      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)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:237:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:292:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23203:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22157:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22130:22)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:21756:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21188:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:24373:3)
      at node_modules/react-dom/cjs/react-dom.development.js:24758:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:21903:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:24757:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:24840:10)
      at Object.<anonymous>.it (src/App.test.js:7:14)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.478 s
Ran all test suites.
[ERROR] Tests failed 
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And package.json:

{
  "name": "misau-gbv-dhis2",
  "version": "1.0.0",
  "description": "",
  "license": "BSD-3-Clause",
  "private": true,
  "scripts": {
    "build": "d2-app-scripts build",
    "start": "d2-app-scripts start",
    "test": "d2-app-scripts test",
    "deploy": "d2-app-scripts deploy"
  },
  "devDependencies": {
    "@dhis2/cli-app-scripts": "^8.1.2"
  },
  "dependencies": {
    "@dhis2/app-runtime": "^3.2.2"
  }
}

Gassim · 13 October 2021 08:11

Would you like to try yarn run test in a newly created app before making any changes to it, do you still see this issue? From what I see you’ll either have to review your code, are you using import { DataQuery } from '@dhis2/app-runtime'? or https://react-query.tanstack.com/overview ? Something needs to be changed in the code otherwise maybe as I said reinstalling everything worked for me.

Yassin · 13 October 2021 08:48

@Gassim It is a newly created app without any changes.

I will try again from scratch to see if it works.

Yassin · 13 October 2021 10:33

No luck, getting the same result.

Although it passes with "@dhis2/app-runtime": "^2.12.3":

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "license": "BSD-3-Clause",
  "private": true,
  "scripts": {
    "build": "d2-app-scripts build",
    "start": "d2-app-scripts start",
    "test": "d2-app-scripts test",
    "deploy": "d2-app-scripts deploy"
  },
  "devDependencies": {
    "@dhis2/cli-app-scripts": "^8.2.2"
  },
  "dependencies": {
    "@dhis2/app-runtime": "^2.12.3"
  }
}

yarn run v1.22.5
$ d2-app-scripts test
Running tests... 
 PASS  src/App.test.js
  ● Console

    console.error
      DHIS2 data context must be initialized, please ensure that you include a <DataProvider> in your application

      at ErrorLink.executeResourceQuery (node_modules/@dhis2/app-service-data/build/cjs/links/ErrorLink.js:18:13)
      at node_modules/@dhis2/app-service-data/build/cjs/engine/DataEngine.js:38:24
          at Array.map (<anonymous>)
      at DataEngine.query (node_modules/@dhis2/app-service-data/build/cjs/engine/DataEngine.js:37:32)
      at node_modules/@dhis2/app-service-data/build/cjs/react/hooks/useDataQuery.js:29:61
      at node_modules/@dhis2/app-service-data/build/cjs/react/hooks/useQueryExecutor.js:65:12
      at node_modules/@dhis2/app-service-data/build/cjs/react/hooks/useQueryExecutor.js:92:7
      at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:19731:26)
      at commitPassiveHookEffects (node_modules/react-dom/cjs/react-dom.development.js:19769:11)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      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)


Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.909 s, estimated 1 s
Ran all test suites.
Tests completed 
Done in 2.49s.

austin · 14 October 2021 15:05

@Yassin which version of yarn are you using?

Gassim · 14 October 2021 21:08

I can see it says yarn run v1.22.5 in the log! @austin (:
It’s yarn 1.22.5, right @Yassin?

Yassin · 15 October 2021 07:36

@austin @Gassim Yes. It is yarn 1.22.5.

austin · 18 October 2021 16:57

@Yassin it appears that you have multiple copies of @dhis2/app-runtime in your project, which is a problem. You should be able to see this by running yarn why @dhis2/app-runtime. You can upgrade to the latest version of @dhis2/cli-app-scripts which includes automatic deduplication of app-runtime thanks to great work by @mediremi recently

Yassin · 19 October 2021 08:41

Hi @austin.

What worked for me was the fix in this PR:

fix(cli): wrap App component in CustomDataProvider in boilerplate test by mediremi · Pull Request #678 · dhis2/app-platform · GitHub.

Thank you all.