search

truffle-box / react-box

Truffle, Webpack and React boilerplate.
https://truffle-box.github.io/
MIT License
736 stars 251 forks source link

"npm test" failed #186

Closed lijie-lee closed 1 year ago

lijie-lee commented 1 year ago

Hey developers. I ran into a problem when ran command "npm test" in the directory of "client" and got the error message as follow: (I set up the project by run "truffle unbox react")

➜ npm test
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> truffle-client@0.1.0 test
> react-scripts test

 FAIL  src/App.test.js
  × render (145 ms)

  ● render

    TypeError: Cannot read properties of undefined (reading 'on')

      47 |     };
      48 |
    > 49 |     events.forEach(e => window.ethereum.on(e, handleChange));
         |                                         ^
      50 |     return () => {
      51 |       events.forEach(e => window.ethereum.removeListener(e, handleChange));
      52 |     };

      at forEach (src/contexts/EthContext/EthProvider.jsx:49:41)
          at Array.forEach (<anonymous>)
      at src/contexts/EthContext/EthProvider.jsx:49:12
      at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:23150:26)
      at commitPassiveMountOnFiber (node_modules/react-dom/cjs/react-dom.development.js:24931:11)
      at commitPassiveMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24891:9)
      at commitPassiveMountEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24878:7)
      at commitPassiveMountEffects (node_modules/react-dom/cjs/react-dom.development.js:24866:3)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:27039:3)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:26984:14)
      at node_modules/react-dom/cjs/react-dom.development.js:26769:9
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:63:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26)
      at render (node_modules/@testing-library/react/dist/pure.js:246:10)
      at Object.<anonymous> (src/App.test.js:5:3)

  console.error
    Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'on')]
        at reportException (client\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
        at innerInvokeEventListeners client\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:341:9)
        at invokeEventListeners (client\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (client\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (client\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (client\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (client\node_modules\react-dom\cjs\react-dom.development.js:4213:16)
        at invokeGuardedCallback (client\node_modules\react-dom\cjs\react-dom.development.js:4277:31)        at reportUncaughtErrorInDEV (client\node_modules\react-dom\cjs\react-dom.development.js:22838:5)
        at captureCommitPhaseError (client\node_modules\react-dom\cjs\react-dom.development.js:27126:5) TypeError: Cannot read properties of undefined (reading 'on')
        at forEach (client\src\contexts\EthContext\EthProvider.jsx:49:41)
        at Array.forEach (<anonymous>)
        at client\src\contexts\EthContext\EthProvider.jsx:49:12
        at commitHookEffectListMount (client\node_modules\react-dom\cjs\react-dom.development.js:23150:26)
        at commitPassiveMountOnFiber (client\node_modules\react-dom\cjs\react-dom.development.js:24931:11)
        at commitPassiveMountEffects_complete (client\node_modules\react-dom\cjs\react-dom.development.js:24891:9)
        at commitPassiveMountEffects_begin (client\node_modules\react-dom\cjs\react-dom.development.js:24878:7)
        at commitPassiveMountEffects (client\node_modules\react-dom\cjs\react-dom.development.js:24866:3)
        at flushPassiveEffectsImpl (client\node_modules\react-dom\cjs\react-dom.development.js:27039:3)
        at flushPassiveEffects (client\node_modules\react-dom\cjs\react-dom.development.js:26984:14) 
        at client\node_modules\react-dom\cjs\react-dom.development.js:26769:9
        at flushActQueue (client\node_modules\react\cjs\react.development.js:2667:24)
        at act (client\node_modules\react\cjs\react.development.js:2582:11)
        at client\node_modules\@testing-library\react\dist\act-compat.js:63:25
        at renderRoot (client\node_modules\@testing-library\react\dist\pure.js:159:26)
        at render (client\node_modules\@testing-library\react\dist\pure.js:246:10)
        at Object.<anonymous> (client\src\App.test.js:5:3)
        at Promise.then.completed (client\node_modules\jest-circus\build\utils.js:276:28)
        at new Promise (<anonymous>)
        at callAsyncCircusFn (client\node_modules\jest-circus\build\utils.js:216:10)
        at _callCircusTest (client\node_modules\jest-circus\build\run.js:212:40)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)
        at _runTest (client\node_modules\jest-circus\build\run.js:149:3)
        at _runTestsForDescribeBlock (client\node_modules\jest-circus\build\run.js:63:9)
        at run (client\node_modules\jest-circus\build\run.js:25:3)
        at runAndTransformResultsToJestFormat (client\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapterInit.js:176:21)
        at jestAdapter (client\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapter.js:109:19)
        at runTestInternal (client\node_modules\jest-runner\build\runTest.js:380:16)
        at runTest (client\node_modules\jest-runner\build\runTest.js:472:34)

      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 <EthProvider> component:

        at EthProvider (client\src\contexts\EthContext\EthProvider.jsx:6:24)
        at App

    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:18687:23)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:18720:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:13923:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:13944:9)
      at commitLayoutEffectOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23391:13)
      at commitLayoutMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24688:9)
      at commitLayoutEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24674:7)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        3.512 s
Ran all test suites.

And content of my package.json is 

{
  "name": "truffle-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^4.0.3",
    "web3": "^1.7.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Is there something wrong or some steps I missed before run "npm test"?

cryptoAnalyst99 commented 1 year ago

I think you are having the same issue as I did. Do you have the Metamask Chrome extension installed and unlocked? Probably not!? I think this is what causes the error.

Check out the issue I opened a couple of days ago. See the solution there (--> modify code in the react hook - that should fix the bug). See here: https://github.com/truffle-box/react-box/issues/185

Hope that helps.

lijie-lee commented 1 year ago

Best thanks to you @cryptoAnalyst99 . I walked around the error by following your solution. And I could move on then!

Btw, I have installed Metamask extension. And the code run correctly on webpage without error like "properties of undefined" of "windows.ethereum...", which occured only when I run unit tests with "npm test" on command line.