Using mount on <video> with muted=true causes React console.error

Current behavior

When using mount on a component with a video tag which is muted, React throws an error. If the muted attribute is removed, then no error is logged.

Code example:

describe('Mounting this component causes React DOM to log an error', () => {
  const Component = () => (
    <video muted>
      <source src="url" />
    </video>
  );

  it('Will it?', () => {
    const wrapper = mount(<Component />);
  });
});

Even if the component is only <video muted /> it still happens.

Output in test:

console.error node_modules/react-dom/cjs/react-dom.development.js:530
    Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
        in video (created by Comp)
        in Comp (created by WrapperComponent)
        in WrapperComponent

Expected behavior

There should be no printed error.

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.10.0
react	16.12.0
react-dom	16.12.0
react-test-renderer	16.10.1
adapter (below)	1.14.0

Adapter

• enzyme-adapter-react-16

PS. First time opening an issue here, I hope I didn’t miss anything

[davidhouweling]

@ljharb any update on this issue?

[ljharb]

This appears to be the same issue as https://github.com/testing-library/react-testing-library/issues/470 as well as https://github.com/facebook/react/issues/10389 - this isn’t something that’s possible to fix in enzyme.

I’ll leave #2330 open, however - if react ever fixes it, i’ll land the test case to ensure it doesn’t regress in the future.