"npm test" failed
lijie-lee opened this issue · 2 comments
lijie-lee commented
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
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: #185
Hope that helps.
lijie-lee commented
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.