如何在react组件中测试jsoneditor

Question

我在我的 React 组件中使用 jsoneditor

示例代码：

import React, { useEffect, useRef } from 'react'
import JSONEditor from "jsoneditor";
import 'jsoneditor/dist/jsoneditor.css';

export const JsonPanel = ({ json }: any) => {
    const jsonRef = useRef<HTMLDivElement | null>(null)

    useEffect(() => {
        let jsonEditor: JSONEditor | null = null
        if (jsonRef.current) {
            jsonEditor = new JSONEditor(jsonRef.current, {
                modes: ['code', 'tree']
            }, json);
        }
        return () => jsonEditor?.destroy()
    }, [json])

    return (
        <div id='json-panel' ref={jsonRef} />
    )
}

应用程序运行时效果良好。但是，我无法使用

@testing-library/react

测试此组件

示例代码：

import React from 'react';
import { render, screen } from '@testing-library/react';
import { JsonPanel } from './JsonPanel';

describe('<JsonPanel />', () => {
    it('should render json', async () => {
        render(<JsonPanel json={{ key: "value" }} />)

        expect(screen.getByText("key")).toBeInTheDocument();
    })
})

问题是，渲染结果在

json-panel

 html 元素中不包含任何 json 内容。从玩笑测试错误输出来看，JSONEditor 被注入到该 html 元素中，但没有 json 内容。

错误输出：

https://gist.github.com/Doraemoe/6aa1288ef3693280ff503b9c68a7896f

我在这里缺少什么吗？谢谢。

Answer 1

{"objName":"舞台", "children": [{"objName":"项目" ,"变量":[ ] ,"脚本":[ [ 50 , 138 , [ ["whenGreenFlag" ] , [" doAsk”，“你叫什么名字？” ] , ["doForever" ,[ ["doIfElse" , ["=" , ["letter:of:" , "1" , ["answer" ] ] , "t" ] ,[ ["say:" , "你有一个罕见的名字！” ] , ["wait:elapsed:from:" , "1" ] ] ,[ ["说：" , "通用名称...好的。" ] , ["wait:elapsed:from:" , "1" ] ] ] ] ] ]] ] }],"info":{} }