search

IIC2513-2021-2 / project

Repositorio oficial para el proyecto del curso IIC2513, período 2021-2
32 stars 1 forks source link

¿Cómo se testea si se renderizó un componente? #64

Open benjavicente opened 2 years ago

benjavicente commented 2 years ago

Quiero revisar si un componente se renderizó múltiples veces, entonces se me ocurrió usar algo como jest.mock para poder ver cuantas veces se llamó.

jest.mock('./path/al/componente', () => jest.fn(() => null));  // o <span/>

Pero al hacer eso, obtengo el siguiente error:

Error: Uncaught [Error: mockConstructor(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]
          at reportException (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
          at innerInvokeEventListeners (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
          at invokeEventListeners (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:22779:12) Error: mockConstructor(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
          at reconcileChildFibers (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:14169:23)
          at reconcileChildren (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:16990:28)
          at mountIndeterminateComponent (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:17890:5)
          at beginWork (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
          at HTMLUnknownElement.callCallback (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
          at invokeEventListeners (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
          at workLoopSync (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
          at renderRootSync (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
          at performSyncWorkOnRoot (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
          at scheduleUpdateOnFiber (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
          at updateContainer (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
          at /home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:26021:7
          at unbatchedUpdates (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
          at legacyRenderSubtreeIntoContainer (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
          at Object.render (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
          at /home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/@testing-library/react/dist/pure.js:101:25
          at batchedUpdates$1 (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
          at act (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
          at render (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/@testing-library/react/dist/pure.js:97:26)
          at Object.<anonymous> (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/src/pages/routines/index.test.jsx:35:5)
          at Promise.then.completed (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/utils.js:276:28)
          at new Promise (<anonymous>)
          at callAsyncCircusFn (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/utils.js:216:10)
          at _callCircusTest (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/run.js:212:40)
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
          at _runTest (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/run.js:149:3)
          at _runTestsForDescribeBlock (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/run.js:63:9)
          at _runTestsForDescribeBlock (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/run.js:57:9)
          at run (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/run.js:25:3)
          at runAndTransformResultsToJestFormat (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:176:21)
          at jestAdapter (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:109:19)
          at runTestInternal (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-runner/build/runTest.js:380:16)
          at runTest (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-runner/build/runTest.js:472:34)
          at Object.worker (/home/benjavicente/repos/cursos/IIC2513/proyecto-frontend/node_modules/jest-runner/build/testWorker.js:133:12)

      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:66:28)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333: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)

Como se podrá hacer entonces? 🤔

benjavicente commented 2 years ago

Solucionado! Hay que utilizar jest.doMock en vez de jest.mock. No entendí por qué, pero funciona 😅

Lo saque ~obiamente~ de SO:

There's a note at the bottom of the docs for jest.mock() for preventing the hoisting behavior:

Note: When using babel-jest, calls to mock will automatically be hoisted to the top of the code block. Use doMock if you want to explicitly avoid this behavior.