使用@testing-library/react 对ReactEditorCompoent进行单元测试问题

[yinyinfurong8888]

opensumi 编辑器组件定义后，需要注册编辑器组件registerEditorComponent，然后editorService.open打开对应的uid 的resouce，
当使用@testing-library/react 对编辑器组件进行测试时， render 方法需要ReactElement类型，我如何能找到编辑器组件的对应的类型呢，目前是ReactEditorComponent， 是个类型
export declare type ReactEditorComponent<MetaData = any> = React.ComponentType<{ resource: IResource<MetaData>; }>;
被测编辑器组件：
const TestComponent: ReactEditorComponent<any> = ({ resource }) => {...}
测试代码：

import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { mockElectronRenderer } from '@opensumi/ide-core-common/lib/mocks/electron/browserMock';
import { URI } from '@opensumi/ide-core-browser';

import { createBrowserInjector } from 'test/injector-helper';
import UiEditor from '../ui.editor';

const fs = require('fs');
let injector;

afterEach(async () => {
  cleanup();
});

describe('init show', () => {
  it('can loadDocument', async () => {
    mockElectronRenderer();

    const mockResource = {
      name: 'mockUI',
      uri: new URI(),
      icon: 'file',
    };

    const { getByTestId } = render(<UiEditor resource={mockResource} />);
  });
});

@testing-library/react 需要ReactElement类型，但TestCompoent类型只是个type， 报错，我这边看了registerEditorComponent以及editorService.open相关的源码，也没有找到对应编辑器组件类型转ReactElement 的方法，想请教下是否有暴露编辑器组件实例的方法，opensumi 推荐的单元测试工具库是什么呢？

其他：对应贡献点：

registerEditorComponent(registry: EditorComponentRegistry) {
    registry.registerEditorComponent({
        component: EtUiEditorComponent,
        uid: ui_editor_id,
        scheme: Schemes.file,
        renderMode: EditorComponentRenderMode.ONE_PER_WORKBENCH,
      });
  
      // 关联文件扩展名
      registry.registerEditorComponentResolver(Schemes.file, (resource, results, resolver) => {
        if (resource.uri.path.ext === ET_UI_EDITOR_EXT) {
          return resolver([
            {
              type: 'component',
              componentId: ui_editor_id,
              saveResource: (resource: IResource, reason: SaveReason) =>
                this.mainFrontService.saveDocument(resource, reason),
              revertResource: (resource: IResource) => this.mainFrontService.revertDocument(resource),
              undo: (resource: IResource) => this.mainFrontService.undoDocument(resource),
              redo: (resource: IResource) => this.mainFrontService.redoDocument(resource),
            },
          ]);
        }
      });
}

[erha19]

@yinyinfurong8888 目前直接基于 Editor 组件做单元测试写起来是相对困难的，框架中推荐的测试方式是基于 Playwright 去做 E2E 测试，基于我们提供的 @opensumi/playwright 包去测试及拓展这类测试。

相关内容：

• feat: add @opensumi/playwright package #1263
• 使用 Playwright 为框架添加基础的 E2E 测试流程 #1475

你可以基于 @opensumi/palywright 中定义的部分基类进行拓展，如：

import { OpenSumiApp } from '@opensumi/playwright';
​
export class MyOpenSumiApp extends OpenSumiApp {
​
}

import { expect, Page, test } from '@playwright/test';
import { MyOpenSumiApp } from './my-app';
​
let page: Page;
let app: MyOpenSumiApp;
​
test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();
  app = await MyOpenSumiApp.loadApp(page, MyOpenSumiApp);
});
​
test.describe('My OpenSumi application', () => {
  test('should show main content panel', async () => {
    expect(await app.isMainContentPanelVisible()).toBe(true);
  });
});

单元测试不太适用于基于 OpenSumi 搭建的项目，你可以仅对自定义的函数或方法采用 Jest / mocha 等测试库进行测试。