Tabs not compatible with react test renderer

[florian-bd]

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

Reproduction link

ant-design/components/tabs/index.tsx

Line 83 in 7ada839

const tabNode = ReactDOM.findDOMNode(this) as Element;

Steps to reproduce

Try to use Tabs with react-test-renderer

What is expected?

Should work fine

What is actually happening?

TypeError: Cannot read property 'indexOf' of undefined

ReactDOM.findDOMNode is used and does not work as expected in the test renderer

Environment	Info
antd	3.12.1
React	16.4.2
System	windows
Browser	NA

[florian-bd]

Quick fix would be to add a test on the breaking issue:
&& tabNode.className &&

[zombieJ]

Hi, since react-test-renderer do not contains dom. It wont works for this. You can use enzyme to test for this: https://airbnb.io/enzyme/

you can ref our test case in each components __test__ file.

[florian-bd]

Thanks for help, it's working indeed with enzyme.
But why would you need full DOM API to render tabs?
It would be nice to support that case

[zombieJ]

Since some logic need to check dom properties like the component using popup (like select, tooltip, treeSelect, etc.) or auto size (like textarea, text, etc.). We have to access the real dom to get the data. For test case, we also need the jsdom env for dom api test usage, so we use enzyme for this.
But tabs, I though we may remove this since hot add className is not a good way.

[florian-bd]

Maybe I should have added that I am generating snapshot tests.
This issue led me to think that I should mock all Ant Design components for snapshots (=shallow render them).
Do you think the library could also provide mocks for all components?

[zombieJ]

@florian-bd, I can't tell that a component lib should provide a mock version since sometime new version may have some bug. If user mock the component (like use jest __mock__ to replace the real component render), they may miss the problem in real web app env. And also, we can't decide which level of mocks user want. Like a placeholder of component, or part of function, or full function but ignore dom operation.

But yes, if you want to just mock all of them. You can just use jest mock for whatever level mocks you want.

[florian-bd]

All good points @zombieJ.
Basically I just want to shallow render them (so props + children). This of course is easy to do with Jest.
The problem is that you have to declare all components in the library, you have some specific components like Tabs and Tabs.TabPane. So it is a bit harder to mock Tabs because you have to provide a mock for this TabPane export.
I was basically following this article https://medium.com/xebia/de-mystifying-jest-snapshot-test-mocks-8e7183d109ea.

Now, if React Native component authors would provide Jest manual mocks of their components to relieve developers of writing those mocks over and over again…

I don't mind writing the mocks for the components I use for sure, but I feel like this work should be shared.

But I am gonna explore a bit more shallow rendering. I am a little bit stuck because I get a memory leak issue when I am using Enzyme + Storyshots but it's not your problem.

[zombieJ]

We provide split components also. You can use like: import Tabs from 'antd/lib/tabs'; and do mock on path of antd/lib/tabs.