Andarist / Andarist/react-textarea-autosize

Can't mount with Enzyme

Đang mở
#307 5 bình luận 2 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
2.4k
Fork
247
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.