Error during Jest unit test run after upgrading to react 16.6.0: Invariant Violation: Unable to find node on an unmounted component #3255
Comments
|
👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. |
|
I've reproduced the issue here: https://codesandbox.io/s/l4wmq19n2m Digging a bit deeper, I see that it's caused by Usage of |
|
Hi error: |
|
const ExampleButton = React.forwardRef((props, ref) => (
<div>
<button {...props} ref={ref} />
</div>
))
render(<Popup trigger={<ExampleButton />} />)See #3405 for more details. |
|
i am seeing this error on production with 0.86.0 and react 16.8.1, even though i can't reproduce it unfortunately. @layershifter are you suggesting that every trigger prop should be passed a if so, maybe the docs should be updated. or could semantic-ui-react take care of this and wrap whatever is passed in a |
|
@jaynetics if you need to pass a Also you can try to use mock, facebook/react#7371 (comment) jest.mock('react-dom', () => ({
findDOMNode: () => ({
getContext: jest.fn(),
}),
})
); |
|
@layershifter i'm just seeing the error in error reports from production. i'm wondering whether i need to do the wrapping in my production code. i can't even trigger the error in jest. i've tried various renderers including |
|
Sorry, I completely lost with it. This issue is related to issues with Local Jest passes, too. I don't understand how this issue is related to "seeing the error in error reports from production". |
|
Hi I'm also having this issue on import React from 'react';
import PropTypes from 'prop-types';
import { Menu, Dropdown, Icon } from 'semantic-ui-react';
import Nav from '../Nav';
import useLayout from 'shared-context/layout/useLayout.hook';
/**
*
* @todo I should update this into non-react version so
* @param {*} props
*/
const SubMenuItem = props => {
if (props.items && props.items.length >= 1) {
return (
<Dropdown
item
trigger={
<div className="icon">
<Icon name={props.icon} />
{props.name || props.content}
</div>
}
>
<Dropdown.Menu>
{props.items.map(({ name, icon, text, to, ...rest }, index) => {
return (
<Dropdown.Item
as={Nav}
to={to}
icon={icon}
key={`submenu-${index}`}
name={name}
text={name || text}
{...rest}
/>
);
})}
</Dropdown.Menu>
</Dropdown>
);
} else {
return <React.Fragment />;
}
};
const M = props => {
const { placement } = props;
const [layout] = useLayout();
const items = placement === 'top' ? layout.menu : layout.sideMenu;
const menuStyle =
placement === 'top'
? { attached: 'bottom' }
: {
pointing: true,
vertical: true,
fluid: true,
style: { marginBottom: '1rem' }
};
if (!items || items.length < 1) {
return <React.Fragment />;
} else if (React.isValidElement(items)) {
// if its an React element render
return items;
} else {
return (
<Menu {...menuStyle}>
{items
.map(n => ({ ...n, as: Nav }))
.map(item => {
if (React.isValidElement(item)) {
return item;
} else if (!!item.header) {
return (
<Menu.Item key={item.key || item.name}>
<Menu.Header>{item.content || item.name}</Menu.Header>{' '}
<Menu.Menu>
{item.items.map(i =>
React.isValidElement(i) ? (
i
) : (
<Menu.Item key={i.key || i.name} {...i} />
)
)}
</Menu.Menu>
</Menu.Item>
);
} else if (item.items && items.length >= 1) {
return <SubMenuItem {...item} />;
} else {
return (
<Menu.Item key={item.key || item.name} as={Nav} {...item} />
);
}
})}
</Menu>
);
}
};
M.defaultProps = {
placement: 'side',
items: []
};
const MenuShape = PropTypes.shape({
/// array can take props
exact: PropTypes.bool,
header: PropTypes.bool,
name: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
to: PropTypes.string.isRequired
});
M.propTypes = {
placement: PropTypes.oneOf(['top', 'side']),
items: PropTypes.oneOfType([
PropTypes.element, // items can direct element
PropTypes.arrayOf(
PropTypes.oneOfType([
PropTypes.element, // array can take an element,
MenuShape
])
)
])
};
export default M; |
|
Sorry, but we don't have time to debug your code. If you experiencing an issue, please fill a new issue and create a minimal repro on CodeSandbox. |
Bug Report
Steps
I have upgraded to react 16.6.0 from 16.5.0. My unit tests were working fine on
16.5.0but after the upgrade I received the following error caused by the component calledRefinPopup(see the entire stack trace below).The code under test looks like this:
And the test code is like this:
I just included the relevant parts.
Expected Result
Tests run as normal.
Actual Result
Below error happened during the tset run.
Version
0.83.0
Testcase
The text was updated successfully, but these errors were encountered: