4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T168a,--- title: Unit Testing Plate description: Learn how to unit test Plate editor and plugins. --- This guide outlines best practices for unit testing Plate plugins and components using `@platejs/test-utils`. ## Installation ```bash npm install @platejs/test-utils ``` ## Setting Up Tests Add the JSX pragma at the top of your test file: ```typescript /** @jsx jsx */ import { jsx } from '@platejs/test-utils'; jsx; // so Biome doesn't remove unused imports ``` This allows you to use JSX syntax for creating editor values. ## Creating Test Cases ### Editor State Representation Use JSX to represent editor states: ```typescript const input = ( Hello world ) as any as PlateEditor; ``` Node elements like ``, ``, `` represent different types of nodes. Special elements like ``, ``, and `` represent selection states. ### Testing Transforms 1. Create an input state 2. Define the expected output state 3. Use `createPlateEditor` to set up the editor 4. Apply the transform(s) directly 5. Assert the editor's new state Example testing bold formatting: ```typescript it('should apply bold formatting', () => { const input = ( Hello world ) as any as PlateEditor; const output = ( Hello world ) as any as PlateEditor; const editor = createPlateEditor({ plugins: [BoldPlugin], value: input.children, selection: input.selection, }); // Apply transform directly editor.tf.toggleMark('bold'); expect(editor.children).toEqual(output.children); }); ``` ### Testing Selection Test how operations affect the editor's selection: ```typescript it('should collapse selection on backspace', () => { const input = ( Hello world ) as any as PlateEditor; const output = ( Held ) as any as PlateEditor; const editor = createPlateEditor({ value: input.children, selection: input.selection, }); editor.tf.deleteBackward(); expect(editor.children).toEqual(output.children); expect(editor.selection).toEqual(output.selection); }); ``` ## Testing Key Events When you need to test keyboard handlers directly: ```typescript it('should call the onKeyDown handler', () => { const input = ( Hello world ) as any as PlateEditor; // Create a mock handler to verify it's called const onKeyDownMock = jest.fn(); const editor = createPlateEditor({ value: input.children, selection: input.selection, plugins: [ { key: 'test', handlers: { onKeyDown: onKeyDownMock, }, }, ], }); // Create the keyboard event const event = new KeyboardEvent('keydown', { key: 'Enter', }) as any; // Call the handler directly editor.plugins.test.handlers.onKeyDown({ ...getEditorPlugin(editor, { key: 'test' }), event, }); // Verify the handler was called expect(onKeyDownMock).toHaveBeenCalled(); }); ``` ## Testing Complex Scenarios For complex plugins like tables, test various scenarios by directly applying transforms: ```typescript describe('Table plugin', () => { it('should insert a table', () => { const input = ( Test ) as any as PlateEditor; const output = ( Test ) as any as PlateEditor; const editor = createPlateEditor({ value: input.children, selection: input.selection, plugins: [TablePlugin], }); // Call transform directly editor.tf.insertTable({ rows: 2, columns: 2 }); expect(editor.children).toEqual(output.children); expect(editor.selection).toEqual(output.selection); }); }); ``` ## Testing Plugins with Options Test how different plugin options affect behavior: ```typescript describe('when keepSelectedTextOnPaste is disabled', () => { it('replaces the selected text with the pasted url', () => { const input = ( start of regular text ) as any; const output = ( start https://google.com ) as any; const editor = createPlateEditor({ plugins: [ LinkPlugin.configure({ options: { keepSelectedTextOnPaste: false, }, }), ], value: input, }); editor.tf.insertData({ getData: (type: string) => (type === 'text/plain' ? 'https://google.com' : ''), } as any); expect(input.children).toEqual(output.children); }); }); ``` ## Mocking vs. Real Transforms While mocking can be useful for isolating specific behaviors, Plate tests often assess actual editor children and selection after transforms. This approach ensures that plugins work correctly with the entire editor state. 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/(guides)/unit-testing.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/(guides)/unit-testing.mdx"}],"className":"h-[70svh] min-h-80"}]]}]