piral-core 0.15.0-alpha.4345 → 0.15.0-alpha.4399

package/esm/defaults/DefaultErrorInfo.js

@@ -5,6 +5,6 @@ import { ExtensionSlot, SwitchErrorInfo } from '../components';
  * Leverage the default one by registration of respective extensions using
  * the "error" name.
  */
-export const DefaultErrorInfo = (props) => (React.createElement(ExtensionSlot, { name: "error", params: props, empty: () => React.createElement(SwitchErrorInfo, Object.assign({ key: "default_error" }, props)) }));
+export const DefaultErrorInfo = (props) => (React.createElement(ExtensionSlot, { name: "error", params: props, empty: () => React.createElement(SwitchErrorInfo, Object.assign({}, props)) }));
 DefaultErrorInfo.displayName = 'DefaultErrorInfo';
 //# sourceMappingURL=DefaultErrorInfo.js.map

package/esm/defaults/DefaultErrorInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultErrorInfo.js","sourceRoot":"","sources":["../../src/defaults/DefaultErrorInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnE,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,oBAAC,eAAe,kBAAC,GAAG,EAAC,eAAe,IAAK,KAAK,EAAI,GAAI,CAC/G,CAAC;AACF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"DefaultErrorInfo.js","sourceRoot":"","sources":["../../src/defaults/DefaultErrorInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnE,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,oBAAC,eAAe,oBAAK,KAAK,EAAI,GAAI,CAC3F,CAAC;AACF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}

package/lib/defaults/DefaultErrorInfo.js

@@ -8,7 +8,7 @@ const components_1 = require("../components");
  * Leverage the default one by registration of respective extensions using
  * the "error" name.
  */
-const DefaultErrorInfo = (props) => (React.createElement(components_1.ExtensionSlot, { name: "error", params: props, empty: () => React.createElement(components_1.SwitchErrorInfo, Object.assign({ key: "default_error" }, props)) }));
+const DefaultErrorInfo = (props) => (React.createElement(components_1.ExtensionSlot, { name: "error", params: props, empty: () => React.createElement(components_1.SwitchErrorInfo, Object.assign({}, props)) }));
 exports.DefaultErrorInfo = DefaultErrorInfo;
 exports.DefaultErrorInfo.displayName = 'DefaultErrorInfo';
 //# sourceMappingURL=DefaultErrorInfo.js.map

package/lib/defaults/DefaultErrorInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultErrorInfo.js","sourceRoot":"","sources":["../../src/defaults/DefaultErrorInfo.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,8CAA+D;AAG/D;;;;GAIG;AACI,MAAM,gBAAgB,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnE,oBAAC,0BAAa,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,oBAAC,4BAAe,kBAAC,GAAG,EAAC,eAAe,IAAK,KAAK,EAAI,GAAI,CAC/G,CAAC;AAFW,QAAA,gBAAgB,oBAE3B;AACF,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"DefaultErrorInfo.js","sourceRoot":"","sources":["../../src/defaults/DefaultErrorInfo.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,8CAA+D;AAG/D;;;;GAIG;AACI,MAAM,gBAAgB,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnE,oBAAC,0BAAa,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,oBAAC,4BAAe,oBAAK,KAAK,EAAI,GAAI,CAC3F,CAAC;AAFW,QAAA,gBAAgB,oBAE3B;AACF,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "0.15.0-alpha.4345",
+  "version": "0.15.0-alpha.4399",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -71,8 +71,8 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "piral-base": "0.15.0-alpha.4345",
-    "piral-debug-utils": "0.15.0-alpha.4345",
+    "piral-base": "0.15.0-alpha.4399",
+    "piral-debug-utils": "0.15.0-alpha.4399",
     "zustand": "^3.0.0"
   },
   "peerDependencies": {
@@ -100,5 +100,5 @@
     "history",
     "tslib"
   ],
-  "gitHead": "56ecd6ad080b3d275752b19afcf8435e4bd09140"
+  "gitHead": "34be0cac6948a92981ab4994b01b34e44462e7a0"
 }

package/src/Piral.test.tsx

@@ -1,30 +1,19 @@
 import * as React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mount, ReactWrapper } from 'enzyme';
+import { render, act } from '@testing-library/react';
 import { Piral } from './Piral';
-import { RegisteredRouter } from './components';
 import { createInstance } from './createInstance';
 
-function resolveAfter(time = 5) {
-  return new Promise<void>((resolve) => setTimeout(resolve, time));
-}
-
-async function waitForComponentToPaint<P = {}>(wrapper: ReactWrapper<P>, amount = 5) {
-  await act(resolveAfter);
-  wrapper.update();
-}
-
 describe('Piral Component', () => {
   it('renders the Piral instance with default settings', async () => {
-    const node = mount(<Piral />);
-    await waitForComponentToPaint(node);
-    expect(node.find(RegisteredRouter).length).toBe(1);
+    const node = render(<Piral />);
+    await act(() => Promise.resolve());
+    expect(node.container.childNodes.length).toBe(1);
   });
 
   it('renders the Piral instance with custom settings', async () => {
     const instance = createInstance();
-    const node = mount(<Piral instance={instance} />);
-    await waitForComponentToPaint(node);
-    expect(node.find(RegisteredRouter).length).toBe(1);
+    const node = render(<Piral instance={instance} />);
+    await act(() => Promise.resolve());
+    expect(node.container.childNodes.length).toBe(1);
   });
 });

package/src/RootListener.test.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
+import { render, act } from '@testing-library/react';
 import { RootListener } from './RootListener';
 
 jest.mock('./hooks/globalState', () => ({
@@ -10,7 +9,7 @@ jest.mock('./hooks/globalState', () => ({
 }));
 
 function resolveAfter(time = 5) {
-  return new Promise<void>(resolve => setTimeout(resolve, time));
+  return new Promise<void>((resolve) => setTimeout(resolve, time));
 }
 
 describe('RootListener Component', () => {
@@ -18,9 +17,7 @@ describe('RootListener Component', () => {
     const element = document.createElement('div');
     const removed = jest.fn();
     document.body.appendChild(element);
-    const container = document.body.appendChild(document.createElement('div'));
-    const root = createRoot(container);
-    root.render(<RootListener />);
+    render(<RootListener />);
     document.body.removeEventListener = removed;
     await act(() => {
       const event = new CustomEvent('render-html', {
@@ -38,13 +35,11 @@ describe('RootListener Component', () => {
   });
 
   it('removes the RootListener successfully', async () => {
-    const container = document.body.appendChild(document.createElement('div'));
     const removed = jest.fn();
-    const root = createRoot(container);
-    root.render(<RootListener />);
+    const container = render(<RootListener />);
     document.body.removeEventListener = removed;
     await act(resolveAfter);
-    root.unmount();
+    container.unmount();
     await act(resolveAfter);
     expect(removed).toHaveBeenCalled();
   });

package/src/actions/app.test.ts

@@ -1,5 +1,5 @@
 import create from 'zustand';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { createElement } from 'react';
 import { createListener, Pilet } from 'piral-base';
 import {
@@ -104,9 +104,9 @@ describe('App Actions Module', () => {
     const NewProvider = state.getState().provider;
     expect(NewProvider).not.toBeUndefined();
 
-    const node = mount(createElement(NewProvider, undefined, 'Some text'));
-    expect(node.find('div').length).toBe(1);
-    expect(node.text()).toBe('Some text');
+    const node = render(createElement(NewProvider, undefined, 'Some text'));
+    expect(node.container.querySelectorAll('div').length).toBe(1);
+    expect(node.container.textContent).toBe('Some text');
   });
 
   it('allows using includeProvider twice', () => {
@@ -122,10 +122,10 @@ describe('App Actions Module', () => {
     const NewProvider = state.getState().provider;
     expect(NewProvider).not.toBeUndefined();
 
-    const node = mount(createElement(NewProvider, undefined, 'Some text'));
-    expect(node.find('b').length).toBe(1);
-    expect(node.find('i').length).toBe(1);
-    expect(node.text()).toBe('Some text');
+    const node = render(createElement(NewProvider, undefined, 'Some text'));
+    expect(node.container.querySelectorAll('b').length).toBe(1);
+    expect(node.container.querySelectorAll('i').length).toBe(1);
+    expect(node.container.textContent).toBe('Some text');
   });
 
   it('allows using includeProvider with props', () => {
@@ -139,10 +139,10 @@ describe('App Actions Module', () => {
     const NewProvider = state.getState().provider;
     expect(NewProvider).not.toBeUndefined();
 
-    const node = mount(createElement(NewProvider, undefined, 'Some text'));
-    expect(node.find('b').length).toBe(0);
-    expect(node.find('i').length).toBe(1);
-    expect(node.text()).toBe('IcecreamSome text');
+    const node = render(createElement(NewProvider, undefined, 'Some text'));
+    expect(node.container.querySelectorAll('b').length).toBe(0);
+    expect(node.container.querySelectorAll('i').length).toBe(1);
+    expect(node.container.textContent).toBe('IcecreamSome text');
   });
 
   it('allows multiple includeProvider with props', () => {
@@ -158,9 +158,9 @@ describe('App Actions Module', () => {
     const NewProvider = state.getState().provider;
     expect(NewProvider).not.toBeUndefined();
 
-    const node = mount(createElement(NewProvider, undefined, 'Some text'));
-    expect(node.find('b').length).toBe(1);
-    expect(node.find('i').length).toBe(1);
-    expect(node.text()).toBe('IcecreamChocolateSome text');
+    const node = render(createElement(NewProvider, undefined, 'Some text'));
+    expect(node.container.querySelectorAll('b').length).toBe(1);
+    expect(node.container.querySelectorAll('i').length).toBe(1);
+    expect(node.container.textContent).toBe('IcecreamChocolateSome text');
   });
 });

package/src/components/ExtensionSlot.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { ExtensionSlot } from './ExtensionSlot';
 
 jest.mock('../hooks/globalState', () => ({
@@ -15,18 +15,19 @@ jest.mock('../hooks/globalState', () => ({
         },
       },
     },
+    destroyPortal: jest.fn(),
   }),
 }));
 
 (React as any).useMemo = (cb) => cb();
 
-const StubComponent1: React.FC = (props) => <div children={props.children} />;
+const StubComponent1: React.FC<any> = (props) => <div role="stub1" children={props.children} />;
 StubComponent1.displayName = 'StubComponent1';
 
-const StubComponent2: React.FC = (props) => <div children={props.children} />;
+const StubComponent2: React.FC<any> = (props) => <div role="stub2" children={props.children} />;
 StubComponent2.displayName = 'StubComponent2';
 
-const StubComponent3: React.FC = (props) => <div children={props.children} />;
+const StubComponent3: React.FC<any> = (props) => <div role="stub3" children={props.children} />;
 
 const state = {
   portals: {},
@@ -60,10 +61,9 @@ const state = {
 
 describe('Extension Module', () => {
   it('is able to default render not available extension with no name', () => {
-    const node = mount(<ExtensionSlot />);
-    expect(node.at(0).exists()).toBe(true);
-    expect(node.find(StubComponent1).length).toBe(0);
-    expect(node.find('div').length).toBe(0);
+    const node = render(<ExtensionSlot />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.container.querySelectorAll('div').length).toBe(0);
   });
 
   it('is able to default render given component with no name', () => {
@@ -71,81 +71,78 @@ describe('Extension Module', () => {
       type: 'html',
       component: {
         mount(element) {
-          const container = document.createElement('div');
+          const container = document.createElement('strong');
           container.textContent = 'Hello!';
           element.appendChild(container);
         },
       },
     };
-    const node = mount(<ExtensionSlot params={{ component }} />);
-    expect(node.at(0).exists()).toBe(true);
-    expect(node.find(StubComponent1).length).toBe(0);
-    expect(node.find('div').length).toBe(1);
-    expect(node.text()).toContain('Hello!');
+    const node = render(<ExtensionSlot params={{ component }} />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.container.querySelectorAll('strong').length).toBe(1);
+    expect(node.container.textContent).toContain('Hello!');
   });
 
   it('is able to default render not available extension', () => {
-    const node = mount(<ExtensionSlot name="qxz" />);
-    expect(node.at(0).exists()).toBe(true);
-    expect(node.find(StubComponent1).length).toBe(0);
+    const node = render(<ExtensionSlot name="qxz" />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
   });
 
   it('is able to (default) render empty extension', () => {
-    const node = mount(<ExtensionSlot name="foo" />);
-    expect(node.at(0).exists()).toBe(true);
-    expect(node.find(StubComponent1).length).toBe(0);
+    const node = render(<ExtensionSlot name="foo" />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
   });
 
   it('is able to custom render not available extension', () => {
-    const node = mount(<ExtensionSlot name="qxz" render={() => <StubComponent1 />} />);
-    expect(node.find(StubComponent1).length).toBe(1);
+    const node = render(<ExtensionSlot name="qxz" render={() => <StubComponent1 />} />);
+    expect(node.queryAllByRole("stub1").length).toBe(1);
   });
 
   it('is able to (custom) render empty extension', () => {
-    const node = mount(<ExtensionSlot name="foo" render={() => <StubComponent1 />} />);
-    expect(node.find(StubComponent1).length).toBe(1);
+    const node = render(<ExtensionSlot name="foo" render={() => <StubComponent1 />} />);
+    expect(node.queryAllByRole("stub1").length).toBe(1);
   });
 
   it('is able to render extension with multiple entries', () => {
-    const node = mount(<ExtensionSlot name="bar" />);
-    expect(node.find(StubComponent1).length).toBe(2);
-    expect(node.find(StubComponent2).length).toBe(1);
-    expect(node.find(StubComponent3).length).toBe(0);
+    const node = render(<ExtensionSlot name="bar" />);
+    expect(node.queryAllByRole("stub1").length).toBe(2);
+    expect(node.queryAllByRole("stub2").length).toBe(1);
+    expect(node.queryAllByRole("stub3").length).toBe(0);
   });
 
   it('is able to render extension without displayName', () => {
-    const node = mount(<ExtensionSlot name="bla" />);
-    expect(node.find(StubComponent1).length).toBe(0);
-    expect(node.find(StubComponent2).length).toBe(0);
-    expect(node.find(StubComponent3).length).toBe(1);
+    const node = render(<ExtensionSlot name="bla" />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.queryAllByRole("stub2").length).toBe(0);
+    expect(node.queryAllByRole("stub3").length).toBe(1);
   });
 
   it('overrides the empty renderer on not available extension', () => {
-    const node = mount(<ExtensionSlot name="qxz" empty={() => <StubComponent1 key="empty" />} />);
-    expect(node.find(StubComponent1).length).toBe(1);
-    expect(node.find(StubComponent2).length).toBe(0);
+    const node = render(<ExtensionSlot name="qxz" empty={() => <StubComponent1 key="empty" />} />);
+    expect(node.queryAllByRole("stub1").length).toBe(1);
+    expect(node.queryAllByRole("stub2").length).toBe(0);
   });
 
   it('overrides the empty renderer on an available extension', () => {
-    const node = mount(<ExtensionSlot name="foo" empty={() => <StubComponent2 key="empty" />} />);
-    expect(node.find(StubComponent1).length).toBe(0);
-    expect(node.find(StubComponent2).length).toBe(1);
+    const node = render(<ExtensionSlot name="foo" empty={() => <StubComponent2 key="empty" />} />);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.queryAllByRole("stub2").length).toBe(1);
   });
 
   it('overrides the empty and default renderer on an available extension', () => {
-    const node = mount(
+    const node = render(
       <ExtensionSlot
         name="foo"
         empty={() => <StubComponent2 key="empty" />}
         render={(nodes) => <StubComponent1 children={nodes} />}
       />,
     );
-    expect(node.find(StubComponent1).length).toBe(1);
-    expect(node.find(StubComponent2).length).toBe(1);
+    expect(node.queryAllByRole("stub1").length).toBe(1);
+    expect(node.queryAllByRole("stub2").length).toBe(1);
   });
 
   it('does not use the render function with empty when emptySkipsRender is set', () => {
-    const node = mount(
+    const node = render(
       <ExtensionSlot
         name="foo"
         emptySkipsRender
@@ -153,12 +150,12 @@ describe('Extension Module', () => {
         render={(nodes) => <StubComponent1 children={nodes} />}
       />,
     );
-    expect(node.find(StubComponent1).length).toBe(0);
-    expect(node.find(StubComponent2).length).toBe(1);
+    expect(node.queryAllByRole("stub1").length).toBe(0);
+    expect(node.queryAllByRole("stub2").length).toBe(1);
   });
 
   it('does use the render function without empty independent if emptySkipsRender is set', () => {
-    const node = mount(
+    const node = render(
       <ExtensionSlot
         name="lol"
         emptySkipsRender
@@ -166,7 +163,7 @@ describe('Extension Module', () => {
         render={(nodes) => <StubComponent1 children={nodes} />}
       />,
     );
-    expect(node.find(StubComponent1).length).toBe(2);
-    expect(node.find(StubComponent2).length).toBe(0);
+    expect(node.queryAllByRole("stub1").length).toBe(2);
+    expect(node.queryAllByRole("stub2").length).toBe(0);
   });
 });

package/src/components/ForeignComponentContainer.test.tsx

@@ -1,65 +1,53 @@
 import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
+import { render, act } from '@testing-library/react';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 
 function resolveAfter(time = 5) {
-  return new Promise<void>(resolve => setTimeout(resolve, time));
-}
-
-async function render(element: any, container: Element) {
-  const root = createRoot(container);
-  root.render(element);
-  await act(resolveAfter);
-  return root;
+  return new Promise<void>((resolve) => setTimeout(resolve, time));
 }
 
 describe('ForeignComponentContainer component', () => {
   it('mounts an HTML component', async () => {
-    const container = document.body.appendChild(document.createElement('div'));
     const mount = jest.fn();
     const component = { mount };
-    await render(
+    const container = render(
       <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
-      container,
     );
+    await act(resolveAfter);
     expect(mount).toHaveBeenCalled();
-    container.remove();
+    container.unmount();
   });
 
   it('unmounts an HTML component', async () => {
-    const container = document.body.appendChild(document.createElement('div'));
     const mount = jest.fn();
     const unmount = jest.fn();
     const component = { mount, unmount };
-    const root = await render(
+    const container = render(
       <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
-      container,
     );
+    await act(resolveAfter);
     expect(mount).toHaveBeenCalled();
     expect(unmount).not.toHaveBeenCalled();
-    root.unmount();
+    container.unmount();
     expect(unmount).toHaveBeenCalled();
-    container.remove();
   });
 
   it('updates an HTML component', async () => {
-    const container = document.body.appendChild(document.createElement('div'));
     const mount = jest.fn();
     const update = jest.fn();
     const component = { mount, update };
-    const root = await render(
+    const container = render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
         $portalId="foo"
         innerProps={{ a: 'bar' }}
       />,
-      container,
     );
+    await act(resolveAfter);
     expect(mount).toHaveBeenCalled();
     expect(update).not.toHaveBeenCalled();
-    root.render(
+    container.rerender(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
@@ -69,35 +57,34 @@ describe('ForeignComponentContainer component', () => {
     );
     await act(resolveAfter);
     expect(update).toHaveBeenCalled();
-    container.remove();
+    container.unmount();
   });
 
   it('forces re-rendering of an HTML component', async () => {
-    const container = document.body.appendChild(document.createElement('div'));
     const componentDidMount = ForeignComponentContainer.prototype.componentDidMount;
     ForeignComponentContainer.prototype.componentDidMount = function () {
       componentDidMount.call(this);
       this.previous = {
-        removeEventListener() { },
+        removeEventListener() {},
       };
     };
     const mount = jest.fn();
     const update = jest.fn();
     const unmount = jest.fn();
     const component = { mount, update, unmount };
-    const root = await render(
+    const container = render(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
         $portalId="foo"
         innerProps={{ a: 'bar' }}
       />,
-      container,
     );
+    await act(resolveAfter);
     expect(mount).toHaveBeenCalled();
     expect(unmount).not.toHaveBeenCalled();
     expect(update).not.toHaveBeenCalled();
-    root.render(
+    container.rerender(
       <ForeignComponentContainer
         $component={component}
         $context={undefined}
@@ -108,25 +95,24 @@ describe('ForeignComponentContainer component', () => {
     await act(resolveAfter);
     expect(update).not.toHaveBeenCalled();
     expect(unmount).toHaveBeenCalled();
-    container.remove();
+    container.unmount();
   });
 
   it('listens to render-html', async () => {
-    const container = document.body.appendChild(document.createElement('div'));
     const mount = jest.fn();
     const renderHtmlExtension = jest.fn();
     const component = { mount };
     const props = { piral: { renderHtmlExtension }, meta: {} };
-    await render(
+    const container = render(
       <ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={props} />,
-      container,
     );
+    await act(resolveAfter);
     expect(mount).toHaveBeenCalled();
     const node = document.querySelector('[data-portal-id=foo]');
     expect(renderHtmlExtension).not.toHaveBeenCalled();
-    node.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
+    node?.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
     await act(resolveAfter);
     expect(renderHtmlExtension).toHaveBeenCalled();
-    container.remove();
+    container.unmount();
   });
 });

package/src/components/Mediator.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import create from 'zustand';
+import { render } from '@testing-library/react';
 import { Mediator } from './Mediator';
-import { mount } from 'enzyme';
 import { StateContext } from '../state';
 import { PiletMetadata } from '../types';
 
@@ -50,7 +50,7 @@ describe('Component Mediator', () => {
       },
     };
     const { context } = createMockContainer();
-    const node = mount(
+    render(
       <StateContext.Provider value={context}>
         <Mediator options={options} />
       </StateContext.Provider>,