feat: 🎸 first integration of testing-library

✅ Closes: #63

Author: mjancarik

Diff for: packages/create-widget/template/babel.config.js

@@ -1,7 +1,7 @@
 const config = require('@merkur/tools/jest.config.js');
 
 config.transform = {
-  '^.+\\.[t|j]sx?$': 'esbuild-jest',
+  '^.+\\.[t|j]sx?$': 'es-jest',
 };
 
 module.exports = {

Diff for: packages/create-widget/template/jest.config.js

@@ -3,9 +3,8 @@
     "@merkur/preact": "0.36.0"
   },
   "devDependencies": {
-    "enzyme": "3.11.0",
-    "identity-obj-proxy": "^3.0.0",
-    "enzyme-adapter-preact-pure": "4.1.0",
-    "enzyme-to-json": "3.6.2"
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/preact": "^3.2.4",
+    "identity-obj-proxy": "^3.0.0"
   }
 }

Diff for: packages/create-widget/views/preact/template.json

@@ -1,9 +1,11 @@
 const config = require('@merkur/tools/jest.config.js');
 
 config.setupFilesAfterEnv = ['./jest.setup.js'];
-config.snapshotSerializers = ['enzyme-to-json/serializer'];
 config.transform = {
-  '^.+\\.[t|j]sx?$': 'esbuild-jest',
+  '^.+\\.[t|j]sx?$': [
+    'es-jest',
+    { jsx: 'automatic', jsxImportSource: 'preact' },
+  ],
 };
 
 module.exports = {

Diff for: packages/create-widget/views/preact/template/jest.config.js

@@ -1,6 +1 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-preact-pure';
-import { createSerializer } from 'enzyme-to-json';
-
-configure({ adapter: new Adapter() });
-expect.addSnapshotSerializer(createSerializer({ mode: 'deep' }));
+import '@testing-library/jest-dom';

Diff for: packages/create-widget/views/preact/template/jest.setup.js

@@ -1,8 +1,13 @@
 /**
  * @jest-environment jsdom
  */
-
-import { shallow } from 'enzyme';
+import {
+  render,
+  fireEvent,
+  cleanup,
+  prettyDOM,
+  screen,
+} from '@testing-library/preact';
 
 import { createMerkurWidget } from '@merkur/core';
 
@@ -15,15 +20,36 @@ describe('View', () => {
   beforeEach(async () => {
     widget = await createMerkurWidget({
       ...widgetProperties,
-      mount() {
-        return shallow(View(widget));
+      mount(widget) {
+        widget.$external.result = render(View(widget));
+        return widget.$external.result;
+      },
+      unmount() {
+        cleanup();
+      },
+      update() {
+        return widget.$external.result.rerender(View(widget));
       },
     });
   });
 
+  afterEach(() => {
+    widget.unmount();
+  });
+
   it('should display main view', async () => {
-    const wrapper = await widget.mount();
+    const { container } = await widget.mount();
+
+    expect(prettyDOM(container)).toMatchSnapshot();
+  });
+
+  it('should increase counter', async () => {
+    const { container } = await widget.mount();
+
+    const button = screen.getByText('increase counter');
+
+    fireEvent.click(button);
 
-    expect(wrapper).toMatchSnapshot();
+    expect(prettyDOM(container)).toMatchSnapshot();
   });
 });