search

enzymejs / enzyme

JavaScript Testing utilities for React
https://enzymejs.github.io/enzyme/
MIT License
19.95k stars 2.01k forks source link

Enzyme renders four ids from single ant design (antd) <Select> component id #2216

Open JESii opened 5 years ago

JESii commented 5 years ago

Summary

I wanted to test that this id was acting properly when the dropdown was clicked, but when four such ids were found, the test failed as 'click' can occur only a a single node. Here's a portion of the dump from wrapper.debug()

 <MediaRoleSelect id="media-role-select" defaultValue="Select Asset Type" onChange={[Function: bound dispatchAction]}>
...

<Select id="media-role-select" defaultValue="Select Asset Type" ...">
<Select inputIcon={{...}} removeIcon={{...}} clearIcon={{...}} menuItemSelectedIcon={{...}} showArrow={[undefined]} id="media-role-select" ...}>
...
<div id="media-role-select" style={[undefined]} onBlur={[Function]}...}>

you'll notice that there are four id="media-role-select" in the generated code from Enzyme

Reproduction link

Edit on CodeSandbox This only shows the code and the Enzyme test.

Steps to reproduce

Generate the app, then run the tests. The number of ids found is four, when it should be one

Expected behavior

Used the id once, it should be found only once.

Current behavior

There are actually four ids in the code generated by Enzyme.

Your environment

API

Version

library version
enzyme 3.9.0
react 16.8.4
react-dom 16.8.4
react-test-renderer N/A
adapter (below)

Adapter

DullReferenceException commented 4 years ago

Having something similar happen, but I'm not using antd. .find(...) is returning 4 elements when there's only one in the HTML. I'm using mount. Looking at the property for the enzyme.__nodes__ symbol that come back from .find() in the debugger, there is an Array of four items. Two of these have a nodeType of function, one has class, and the last has host. Looking at the HTML, there is only one element matching the search criteria (I'm using a class selector).

[
  Object {nodeType: "function", type: Object, props: Object, …},
  Object {nodeType: "function", type: , props: Object, …},
  Object {nodeType: "class", type: , props: Object, …},
  Object {nodeType: "host", type: "button", props: Object, …}
]

I'm using these versions:

├── enzyme@3.11.0 
├── enzyme-adapter-react-16@1.15.2 
├── react@16.13.1 
└── react-dom@16.13.1

I've tried downgrading enzyme-adapter-react-16 to 1.15.1, but the behavior is the same.

ljharb commented 4 years ago

This is intentional; enzyme's tree includes all react elements as well. Try adding .hostNodes() to filter it down to only DOM nodes.

You can use .debug() to confirm what's in the tree.