(div2 = el)} />
-
-
-
-
(p = el)}>
-
-
-
(div3 = el)} />
-
,
- node,
- );
+
(p = el)}>
+
+
+
(div3 = el)} />
+
,
+ );
+ });
[svg, svg2, svg3, svg4].forEach(el => {
expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
// SVG tagName is case sensitive.
@@ -110,7 +113,7 @@ describe('ReactDOMSVG', () => {
});
});
- it('creates elements with SVG namespace inside SVG tag during update', () => {
+ it('creates elements with SVG namespace inside SVG tag during update', async () => {
let inst,
div,
div2,
@@ -126,6 +129,7 @@ describe('ReactDOMSVG', () => {
class App extends React.Component {
state = {step: 0};
+
render() {
inst = this;
const {step} = this.state;
@@ -159,13 +163,17 @@ describe('ReactDOMSVG', () => {
}
const node = document.createElement('div');
- ReactDOM.render(
-
,
- node,
- );
- inst.setState({step: 1});
+ const root = ReactDOMClient.createRoot(node);
+ await act(() => {
+ root.render(
+
,
+ );
+ });
+ await act(() => {
+ inst.setState({step: 1});
+ });
[svg, svg2, svg3, svg4].forEach(el => {
expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
@@ -193,7 +201,7 @@ describe('ReactDOMSVG', () => {
});
});
- it('can render SVG into a non-React SVG tree', () => {
+ it('can render SVG into a non-React SVG tree', async () => {
const outerSVGRoot = document.createElementNS(
'http://www.w3.org/2000/svg',
'svg',
@@ -204,12 +212,15 @@ describe('ReactDOMSVG', () => {
);
outerSVGRoot.appendChild(container);
let image;
- ReactDOM.render(
(image = el)} />, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render( (image = el)} />);
+ });
expect(image.namespaceURI).toBe('http://www.w3.org/2000/svg');
expect(image.tagName).toBe('image');
});
- it('can render HTML into a foreignObject in non-React SVG tree', () => {
+ it('can render HTML into a foreignObject in non-React SVG tree', async () => {
const outerSVGRoot = document.createElementNS(
'http://www.w3.org/2000/svg',
'svg',
@@ -220,7 +231,10 @@ describe('ReactDOMSVG', () => {
);
outerSVGRoot.appendChild(container);
let div;
- ReactDOM.render( (div = el)} />, container);
+ const root = ReactDOMClient.createRoot(container);
+ await act(() => {
+ root.render(
(div = el)} />);
+ });
expect(div.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
expect(div.tagName).toBe('DIV');
});