Enzyme转RTL：如何转换.instance().addNewLink()相关测试代码

核心思路转换 #

RTL的设计核心是模拟真实用户的交互行为，而非直接操作组件实例或内部状态，这也是Kent C. Dodds那段话的核心：

如果你的测试使用了instance()或state()，那你测试的是用户不可能知道甚至不关心的内容，这会让你的测试无法为用户使用时的功能正常运行提供信心。

针对你的场景，不需要直接调用addNewLink()方法，而是找到触发该逻辑的UI元素（比如"添加链接"按钮），模拟用户点击操作；验证表单数量时，通过用户能感知到的元素特征去查找。

转换后的测试代码 #

假设ELiteratureDocuments组件里有一个用于添加链接的按钮（比如带有data-testid="add-link-btn"属性），LinkForm组件渲染时可通过角色或测试id定位：

it('should render the correct number of editing forms', () => {
  // 渲染目标组件
  render(<ELiteratureDocuments currentDocuments={[]} currentDocumentsSortingOrder={[]} />);

  // 模拟用户点击"添加链接"按钮（替代原instance().addNewLink()调用）
  fireEvent.click(screen.getByTestId('add-link-btn'));

  // 查找所有编辑表单并验证数量（替代原find(LinkForm).length）
  // 方式1：如果LinkForm是表单元素，通过role查找
  const linkForms = screen.getAllByRole('form');
  // 方式2：如果给LinkForm添加了测试标识，通过testid查找
  // const linkForms = screen.getAllByTestId('link-form');
  
  expect(linkForms).toHaveLength(1);
});

关键说明 #

• 替换instance().addNewLink()：找到触发添加逻辑的UI交互点（按钮、链接等），用fireEvent或userEvent（更贴近真实用户行为）模拟操作，这才是用户实际会执行的动作。
• 替换find(LinkForm).length：RTL不推荐直接查找组件类，而是通过用户可见的特征（比如角色、文本、测试id）定位元素。如果LinkForm没有明显的用户可见特征，建议给它添加data-testid属性用于测试（这是RTL官方推荐的测试专属标识）。

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