Jest throw error when testing Tabs.TabPane

[banyudu]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.11.2

Environment

macOS Mojave 10.14.1 with node v8.9.1

Reproduction link

https://github.com/banyudu/antd-jest-error

Steps to reproduce

npm i && npm test

What is expected?

Success test

What is actually happening?

Error: Uncaught [TypeError: Cannot read property 'scrollWidth' of undefined]
at reportException (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at invokeEventListeners (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
at HTMLUnknownElementImpl._dispatch (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
at HTMLUnknownElementImpl.dispatchEvent (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
at HTMLUnknownElement.dispatchEvent (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
at Object.invokeGuardedCallbackDev (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2381:16)
at invokeGuardedCallback (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2434:31)
at commitRoot (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9779:7)
at completeRoot (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11210:3) TypeError: Cannot read property 'scrollWidth' of undefined
at ScrollableTabBarNode.getScrollWH (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/rc-tabs/lib/ScrollableTabBarNode.js:230:18)
at ScrollableTabBarNode.setNextPrev (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/rc-tabs/lib/ScrollableTabBarNode.js:171:28)
at ScrollableTabBarNode.componentDidUpdate (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/rc-tabs/lib/ScrollableTabBarNode.js:146:27)
at ScrollableTabBarNode.componentDidMount (/Users/banyudu/dev/zhike/apollon/antd-jest-error/node_modules/rc-tabs/lib/ScrollableTabBarNode.js:131:12)

[banyudu]

There is a similar issue #5362, but the solution in it can't solve this issue.

[banyudu]

import React from 'react'
import renderer from 'react-test-renderer'
import { Tabs } from 'antd'

const TabPane = Tabs.TabPane

if (typeof window !== 'undefined') {
  global.window.resizeTo = (width, height) => {
    global.window.innerWidth = width || global.window.innerWidth;
    global.window.innerHeight = height || global.window.innerHeight;
    global.window.dispatchEvent(new Event('resize'));
  };
  global.window.scrollTo = () => {};
}

// The built-in requestAnimationFrame and cancelAnimationFrame not working with jest.runFakeTimes()
// https://github.com/facebook/jest/issues/5147
global.requestAnimationFrame = cb => setTimeout(cb, 0);
global.cancelAnimationFrame = cb => clearTimeout(cb, 0);

it('TabPane', () => {
  expect(renderer.create(<div></div>).toJSON()).toMatchSnapshot() // works
  expect(renderer.create(<Tabs><TabPane tab="demo" key="demo"></TabPane></Tabs>).toJSON()).toMatchSnapshot() // fail
})

[pdavid0]

I am facing the same issue, followed the jest + enzyme setup, no resolution.

[yanlee26]

I got this error: node_modules/antd/es/button/style/css.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import '../../style/index.css';

[arvinsim]

I also get the same error as @yanlee26

[arvinsim]

Any resolution on this?

[Priyayarra]

I also got the same error

[dgreene1]

Has anyone resolved this yet?

We still have problems even when we follow the regular Jest advice of transforming antd from a ES6 module to a CJS module and also replacing the CSS import. @chenshuai2144 since we've all tried numerous workarounds for this, can you investigate if this is an issue with antd and not our configurations?

cc'ing my coworker @patelrikin since he's also interested in finding out what your teams have done to get around this.

[Andrew-He]

got the same error,

I did jest-mock to bypass this component

jest.mock(
  'rc-tabs/lib/ScrollableTabBarNode',
  () => () => null
)

and it works fine.

[dgreene1]

But if you mock the component, you’re not even executing the test (in most cases).

We need a real solution that work with Ant’s Babel/import plugin.

[Gervwyk]

Any ideas how to make this work. Simular issue with react-test-renderer for Selector:

TypeError: Cannot read property 'scrollWidth' of null

[afc163]

See #14462 (comment)

Or you can upgrade to antd v4.

[dgreene1]

Please reopen this since none of the linked articles solve the root problem.