组件测试 @lexical/react 编辑器：如何针对 Cypress 渲染的 HTML 进行断言？

Question

我想在 Cypress 中对基于 controlled @lexical/react 的输入进行组件测试。示例场景：

Given I have a controlled input with initial state "Hello world"

When I click into the input 
And I press "! key" + "Home key" + "Arrow right key" + "Arrow right key" + "n key"

Then input content is "Henlo world!"

如何获取编辑器的文本内容，以便我对其进行断言？

我希望我可以将新创建的编辑器实例附加到呈现的内容以访问本地词法方法：

it('Works as intended', () => {
    const Test: FC = () => {
        const [state, setState] = useState('Hello world')
        
        return <MyInput value={state} setValue={setState} />
    }
    
    mount(<Test />)
    
    cy.get('[contenteditable="true"]').should(editorRoot => {
        const editorHTML = editorRoot.get()[0]                
        const editorHtmlClone = editorHTML.cloneNode(true)    
        const editor = createEditor()
        editor.setRootElement(editorHtmlClone as any)         
        editor.getEditorState().read(() => {
            const textValue = $getRoot().getTextContent()
            // Now I can access the editor's value
            // but unfortunately it's been overwritten
        })
    })
})

但不幸的是，这失败了，因为 editor.setRootElement 清除了 RootElement 的内容。

我真的很想找到一种方法来利用 Lexical 的 API，这样我就可以通过 API 测试我的功能，而不必在我的测试中反映它的确切实现（例如定义确切的预期 html - 它可以改变，在词汇之外并不意味着太多，并且在描述我想要的状态时更糟糕）。

有什么options/workarounds可以做到这一点吗？

Answer 1

您可以在元素上编写实例，或者在您的测试环境中编写 window 本身。这就是我们为 TreeView (debugger)!

所做的

  useEffect(() => {
    const element = treeElementRef.current;
    if (element !== null) {
      element.__lexicalEditor = editor;
      return () => {
        element.__lexicalEditor = null;
      };
    }
  }, [editor]);

也就是说，我认为您的期望比 E2E 测试更适合单元测试。 E2E 测试应验证 DOM、HTML（通过 innerHTML）和选择（通过 getDOMSelection()）。

如果您想详细了解我们如何进行端到端测试you can check Lexical's。

ℹ️ 我们计划为用户发布一个单独的测试包，以便能够利用我们一直以来在 Playwright 之上构建的所有实用程序，而不必自己重新实现它们。

组件测试 @lexical/react 编辑器：如何针对 Cypress 渲染的 HTML 进行断言？

Component-testing @lexical/react editor: How to assert against HTML rendered by Cypress?

reactjs

cypress

cypress-component-test-runner

lexicaljs