如何在Go.js中测试值渲染？Jest验证go.TextBlock返回值方法

前提准备 #

Jest默认采用Node环境，而Go.js依赖DOM API，因此需要先配置Jest使用jsdom环境：

• 在jest.config.js中设置：

module.exports = {
  testEnvironment: 'jsdom'
};

测试步骤及代码示例 #

1. 初始化Diagram与节点模板
   在测试用例的前置钩子中创建DOM容器，初始化Diagram并定义带命名TextBlock的节点模板（必须给TextBlock设置name属性，用于后续精准查找）。

2. 加载测试数据并完成渲染
   将nodeDataArray赋值给Diagram的model，调用layoutDiagram(true)强制同步完成布局，确保节点渲染完全。

3. 查找元素并验证值
   通过findNodeForKey根据数据中的key找到对应节点，再用findObject通过TextBlock的name获取元素，最后验证其text属性是否符合预期。

完整测试代码示例：

const go = require('gojs');

describe('Go.js 节点文本渲染验证', () => {
  let diagram;
  let container;

  beforeEach(() => {
    // 创建DOM容器
    container = document.createElement('div');
    document.body.appendChild(container);
    // 初始化Diagram
    diagram = new go.Diagram(container);
    // 定义节点模板，给TextBlock命名为NodeText
    diagram.nodeTemplate = new go.Node('Auto')
      .add(
        new go.Shape('RoundedRectangle', { fill: 'white' }),
        new go.TextBlock({ margin: 8, name: 'NodeText' })
          .bind('text', 'label') // 绑定数据中的label字段到text属性
      );
  });

  afterEach(() => {
    // 清理测试环境
    document.body.removeChild(container);
    diagram = null;
  });

  test('TextBlock应渲染正确的文本值', () => {
    // 测试数据
    const nodeDataArray = [
      { key: 1, label: '首页' },
      { key: 2, label: '产品列表' }
    ];
    // 加载数据到模型
    diagram.model = new go.GraphLinksModel(nodeDataArray);
    // 强制完成布局，确保渲染完成
    diagram.layoutDiagram(true);

    // 验证第一个节点
    const homeNode = diagram.findNodeForKey(1);
    const homeText = homeNode.findObject('NodeText');
    expect(homeText.text).toBe('首页');

    // 验证第二个节点
    const listNode = diagram.findNodeForKey(2);
    const listText = listNode.findObject('NodeText');
    expect(listText.text).toBe('产品列表');
  });
});

关键注意点 #

• TextBlock命名：必须给TextBlock设置唯一的name属性，否则无法精准定位目标元素。
• 同步布局：调用layoutDiagram(true)确保布局和渲染同步完成，避免因异步渲染导致的元素未就绪问题。
• 环境配置：务必确认Jest使用jsdom环境，否则Go.js无法正常初始化和渲染。

内容的提问来源于stack exchange，提问作者Chris