started writing similar tests

config/rollup.js

@@ -89,6 +89,7 @@ export function createRollupConfig({ pkg, tailwindConfig }) {
         globals: { react: 'React' },
         file: `./${pkg.module}`,
         exports: 'named',
+        inlineDynamicImports: true,
       },
       // {
       //   file: `./${pkg.main}`,

packages/core/editor/src/YooptaEditor.test.tsx

@@ -1,46 +1,18 @@
-import React from 'react';
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { YooptaEditor } from './YooptaEditor';
-import { YooptaPlugin } from './plugins';
-import { createYooptaEditor } from './editor';
-
-const fakePlugin = new YooptaPlugin({
-  type: 'Test',
-  elements: {
-    test: {
-      render: (props) => <div {...props.attributes}>{props.children}</div>,
-      props: { nodeType: 'block' },
-    },
-  },
-});
-
-const paragraphPlugin = new YooptaPlugin({
-  type: 'Paragraph',
-  elements: {
-    paragraph: {
-      render: (props) => <p {...props.attributes}>{props.children}</p>,
-      props: { nodeType: 'block' },
-    },
-  },
-});
-
-const plugins = [fakePlugin, paragraphPlugin];
+import { screen } from '@testing-library/react';
+import { renderYooptaEditor } from 'test-utils';
 
 describe('YooptaEditor Component', () => {
   it('renders correctly with minimum props', () => {
-    const editor = createYooptaEditor();
-    render(<YooptaEditor editor={editor} plugins={plugins} />);
+    renderYooptaEditor();
 
     expect(screen.getByTestId('yoopta-editor')).toBeInTheDocument();
   });
 
   it('applies className and style correctly', () => {
     const style = { width: '500px' };
     const className = 'custom-class';
-    const editor = createYooptaEditor();
-
-    render(<YooptaEditor editor={editor} plugins={plugins} className={className} style={style} />);
+    renderYooptaEditor({ className, style });
 
     const editorEl = screen.getByTestId('yoopta-editor');
     expect(editorEl).toHaveClass(className);
@@ -50,18 +22,15 @@ describe('YooptaEditor Component', () => {
   it('validates initial value and handles invalid data gracefully', () => {
     const consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
     const invalidValue = 'this is not a valid value';
-    const editor = createYooptaEditor();
+    renderYooptaEditor({ value: invalidValue });
 
-    render(<YooptaEditor editor={editor} plugins={plugins} value={invalidValue} />);
     expect(consoleErrorMock).toHaveBeenCalled();
     consoleErrorMock.mockRestore();
   });
 
   it('displays a warning for legacy data usage', () => {
-    const editor = createYooptaEditor();
-
     const value = [{ id: 'old-format', nodeType: 'old' }];
-    render(<YooptaEditor editor={editor} plugins={plugins} value={value} />);
+    renderYooptaEditor({ value });
 
     expect(screen.getByText(/legacy version of the Yoopta-Editor is used/i)).toBeInTheDocument();
   });

packages/core/editor/src/YooptaEditor.tsx

@@ -19,7 +19,7 @@ import { YooptaMark } from './marks';
 import { FakeSelectionMark } from './marks/FakeSelectionMark';
 import { generateId } from './utils/generateId';
 
-type Props = {
+export type YooptaEditorProps = {
   id?: string;
   editor: YooEditor;
   plugins: YooptaPlugin[];
@@ -81,7 +81,7 @@ const YooptaEditor = ({
   readOnly,
   width,
   style,
-}: Props) => {
+}: YooptaEditorProps) => {
   const applyChanges = () => {
     setEditorState((prev) => ({ ...prev, version: prev.version + 1 }));
   };

packages/core/editor/src/index.ts

@@ -7,7 +7,7 @@ export {
   useYooptaReadOnly,
   useYooptaPluginOptions,
 } from './contexts/YooptaContext/YooptaContext';
-import { YooptaEditor } from './YooptaEditor';
+import { YooptaEditor, type YooptaEditorProps } from './YooptaEditor';
 
 // [TODO] - should be in separated package @yoopta/common/ui or @yoopta/ui
 export { UI } from './UI';
@@ -40,3 +40,4 @@ export { Blocks } from './editor/blocks';
 
 import './styles.css';
 export default YooptaEditor;
+export { YooptaEditorProps };

packages/plugins/paragraph/src/plugin/ParagraphPlugin.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Paragraph } from './';
+import { renderYooptaEditor } from 'test-utils';
+
+const plugins = [Paragraph];
+
+describe('Paragraph Plugin', () => {
+  it('renders correctly with basic props', () => {
+    const { container } = renderYooptaEditor({ plugins });
+
+    const paragraph = screen.getByTestId('paragraph');
+    expect(paragraph).toBeInTheDocument();
+    expect(paragraph.tagName).toBe('P');
+    expect(paragraph.textContent).toBe('Test content');
+  });
+
+  it('applies custom classes and attributes', () => {
+    const customProps = {
+      className: 'custom-class',
+      style: { textAlign: 'center' },
+      attributes: { 'data-testid': 'paragraph' },
+    };
+    render(<Paragraph editor={editor} {...customProps} children="Test content" />);
+    const paragraph = screen.getByTestId('paragraph');
+    expect(paragraph).toHaveClass('custom-class');
+    expect(paragraph).toHaveStyle({ textAlign: 'center' });
+  });
+
+  it('handles extendRender prop', () => {
+    const extendedRender = vi.fn(({ children }) => <div>{children}</div>);
+    render(
+      <Paragraph
+        editor={editor}
+        extendRender={extendedRender}
+        children="Extended content"
+        attributes={{ 'data-testid': 'extended' }}
+      />,
+    );
+    expect(extendedRender).toHaveBeenCalled();
+    const extendedElement = screen.getByTestId('extended');
+    expect(extendedElement.textContent).toBe('Extended content');
+  });
+
+  it('serializes to HTML correctly', () => {
+    const element = { type: 'paragraph', children: [{ text: 'Hello world' }] };
+    const text = 'Hello world';
+    const serializedOutput = Paragraph.parsers.html.serialize(element, text);
+    expect(serializedOutput).toBe('<p>Hello world</p>');
+  });
+
+  it('deserializes from HTML correctly', () => {
+    document.body.innerHTML = `<p>Hello world</p>`;
+    const pElement = document.querySelector('p');
+    const deserializedOutput = Paragraph.parsers.html.deserialize.nodeNames.includes(pElement.nodeName);
+    expect(deserializedOutput).toBeTruthy();
+  });
+
+  it('serializes to Markdown correctly', () => {
+    const element = { type: 'paragraph', children: [{ text: 'Hello world' }] };
+    const text = 'Hello world';
+    const serializedMarkdown = Paragraph.parsers.markdown.serialize(element, text);
+    expect(serializedMarkdown).toBe('Hello world\n');
+  });
+});

tests/test-utils.tsx

@@ -0,0 +1,63 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { createYooptaEditor } from '../packages/core/editor/src/editor';
+import { YooptaPlugin } from '../packages/core/editor/src/plugins';
+import { YooptaEditor, YooptaEditorProps } from '../packages/core/editor/src/YooptaEditor';
+
+export const InlinePlugin = new YooptaPlugin({
+  type: 'Inline',
+  elements: {
+    inline: {
+      render: (props) => <span {...props.attributes}>{props.children}</span>,
+      props: { nodeType: 'inline' },
+    },
+  },
+});
+
+export const DefaultParagraph = new YooptaPlugin({
+  type: 'Paragraph',
+  elements: {
+    paragraph: {
+      render: (props) => <p {...props.attributes}>{props.children}</p>,
+      props: { nodeType: 'block' },
+    },
+  },
+});
+
+export const BlockPluginWithProps = new YooptaPlugin({
+  type: 'Block',
+  elements: {
+    block: {
+      render: (props) => <div {...props.attributes}>{props.children}</div>,
+      props: { nodeType: 'block', checked: false },
+    },
+  },
+});
+
+export const TEST_PLUGIN_LIST = [InlinePlugin, DefaultParagraph, BlockPluginWithProps];
+
+export function renderYooptaEditor(props: Partial<YooptaEditorProps> = {}) {
+  const editor = createYooptaEditor();
+
+  return render(
+    <YooptaEditor {...props} editor={props.editor || editor} plugins={props.plugins || TEST_PLUGIN_LIST} />,
+  );
+}
+
+const data = {
+  'aafd7597-1e9a-4c80-ab6c-88786595d72a': {
+    'aafd7597-1e9a-4c80-ab6c-88786595d72a': {
+      id: 'aafd7597-1e9a-4c80-ab6c-88786595d72a',
+      meta: { depth: 0, order: 0 },
+      type: 'Paragraph',
+      value: [
+        {
+          id: '3aff9e2c-5fee-43ff-b426-1e4fee8b303c',
+          type: 'paragraph',
+          props: { nodeType: 'block' },
+          children: [{ text: '' }],
+        },
+      ],
+    },
+  },
+};

vitest.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig, transformWithEsbuild } from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
+import { resolve } from 'path';
 
 export default defineConfig({
   plugins: [
@@ -27,4 +28,9 @@ export default defineConfig({
       'packages/development/**/*.{test,spec}.{ts,tsx}',
     ],
   },
+  resolve: {
+    alias: {
+      'test-utils': resolve(__dirname, 'tests/test-utils.tsx'),
+    },
+  },
 });