Andarist / Andarist/react-textarea-autosize

Can't mount with Enzyme

Abierto
#307 5 comentarios 2 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
2.4k
Forks
247
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

Hi!

I'm trying to unit test a simple component that I've coded using this lib, but as soon as I try to mount it (instead of shallow) I got the following error:

```
FAIL src/components/KeyResult/Single/Sections/AddComment/input.spec.tsx
component interations
✕ should use a full rounded box when the input has a single line (48 ms)
○ skipped should descrease the border radius based on the number of lines of the input
○ skipped should change the border color if the input is focused
○ skipped should change the box shadow if the input is focused
○ skipped should keep the same border color if the input is not focused
○ skipped should not have a box shadow if the input is not focused
○ skipped should keep the same border color if the input was focused, but it is not anymore
○ skipped should not have a box shadow if the input was focused, but it is not anymore
○ skipped should display a spinner if the component is being loaded
○ skipped should display a spinner if the user submitted the form

● component interations › should use a full rounded box when the input has a single line

TypeError: The provided value is not of type 'Element'.

at Object.exports.convert (node_modules/jsdom/lib/jsdom/living/generated/Element.js:26:9)
at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:644:19)
at getSizingData (node_modules/react-textarea-autosize/dist/react-textarea-autosize.cjs.dev.js:113:22)
at resizeTextarea (node_modules/react-textarea-autosize/dist/react-textarea-autosize.cjs.dev.js:183:109)
at Object. (node_modules/jest-react-hooks-shallow/src/mock-use-effect/mock-use-effect.ts:33:31)
at TextareaAutosize (node_modules/react-textarea-autosize/dist/react-textarea-autosize.cjs.dev.js:213:11)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14803:18)

console.error
Error: Uncaught [TypeError: The provided value is not of type 'Element'.]
at reportException (/home/delucca/Code/delucca/execution-mode/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
at innerInvokeEventListeners (/home/delucca/Code/delucca/execution-mode/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
at invokeEventListeners (/home/delucca/Code/delucca/execution-mode/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/home/delucca/Code/delucca/execution-mode/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/home/delucca/Code/delucca/execution-mode/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/home/delucca/Code/delucca/execution-mode/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/home/delucca/Code/delucca/execution-mode/node_modules/react-dom/cjs/react-dom.development.js:237:16)
at invokeGuardedCallback (/home/delucca/Code/delucca/execution-mode/node_modules/react-dom/cjs/react-dom.development.js:292:31)
at beginWork$1 (/home/delucca/Code/delucca/execution-mode/node_modules/react-dom/cjs/react-dom.development.js:23203:7)
at performUnitOfWork (/home/delucca/Code/delucca/execution-mode/node_modules/react-dom/cjs/react-dom.development.js:22157:12) TypeError: The provided value is not of type 'Element'.
at Object.exports.convert (/home/delucca/Code/delucca/execution-mode/node_modules/jsdom/lib/jsdom/living/generated/Element.js:26:9)
at Window.getComputedStyle (/home/delucca/Code/delucca/execution-mode/node_modules/jsdom/lib/jsdom/browser/Window.js:644:19)
at getSizingData (/home/delucca/Code/delucca/execution-mode/node_modules/react-textarea-autosize/dist/react-textarea-autosize.cjs.dev.js:113:22)
at resizeTextarea (/home/delucca/Code/delucca/execution-mode/node_modules/react-textarea-autosize/dist/react-textarea-autosize.cjs.dev.js:183:109)
at Object. (/home/delucca/Code/delucca/execution-mode/node_modules/jest-react-hooks-shallow/src/mock-use-effect/mock-use-effect.ts:33:31)
at /home/delucca/Code/delucca/execution-mode/node_modules/jest-mock/build/index.js:444:39
at Object. (/home/delucca/Code/delucca/execution-mode/node_modules/jest-mock/build/index.js:452:13)
at Object.mockConstructor (/home/delucca/Code/delucca/execution-mode/node_modules/jest-mock/build/index.js:166:19)
at TextareaAutosize (/home/delucca/Code/delucca/execution-mode/node_modules/react-textarea-autosize/dist/react-textarea-autosize.cjs.dev.js:213:11)
at renderWithHooks (/home/delucca/Code/delucca/execution-mode/node_modules/react-dom/cjs/react-dom.development.js:14803:18)

at VirtualConsole. (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)

console.error
The above error occurred in the component:
in ForwardRef(TextareaAutosize) (created by KeyResultSectionAddCommentInput)
in div (created by Box)
in Box (created by KeyResultSectionAddCommentInput)
in KeyResultSectionAddCommentInput
in form (created by Form)
in Form
in Formik (created by WrapperComponent)
in WrapperComponent

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)

Test Suites: 1 failed, 1 total
Tests: 1 failed, 9 skipped, 10 total
Snapshots: 0 total
Time: 2.214 s
Ran all test suites matching /AddComment\/input/i.
```

**IMPORTANT:** I've already added common JSDom properties to my jest global. Here is my setup tests file:

```typescript
import enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import enableHooks from 'jest-react-hooks-shallow'
import fetch from 'node-fetch'
import { DOMWindow, JSDOM } from 'jsdom'

enableHooks(jest)

enzyme.configure({
adapter: new Adapter(),
})

interface JestGlobal extends NodeJS.Global {
fetch: typeof fetch
document: Document
window: DOMWindow
navigator: Navigator
}

declare let global: JestGlobal

global.fetch = fetch

jest.mock('react-intl', () => {
const reactIntl = jest.requireActual('react-intl')
const intl = reactIntl.createIntl({
locale: 'en',
})

return {
...reactIntl,
useIntl: () => intl,
}
})

const dom = new JSDOM('')
global.window = dom.window
global.document = global.window.document
global.navigator = global.window.navigator
```

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.