Andarist / Andarist/react-textarea-autosize

Can't mount with Enzyme

Ouverte
#307 5 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
TypeScript
Étoiles
2.4k
Forks
247
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

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
```

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.