Andarist / Andarist/react-textarea-autosize
Can't mount with Enzyme
- 主要语言
- TypeScript
- 星标
- 2.4k
- 派生
- 247
- PR 合并指标
- 30 天内没有已合并 PR
描述
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
```
贡献指南
这个仓库没有索引到贡献指南
评估
这个 Issue 还没有评估数据。