如何在setup.test.js中配置Enzyme与React Testing Library并自定义getByTestId

首先得明确：这个错误本身是React Testing Library（RTL）的预期行为——当getByText这类查询方法找到多个匹配的元素时，就会抛出这个错误，因为这类方法默认期望唯一匹配项。它不一定是你自定义testIdAttribute直接导致的，但可能是配置后测试逻辑的适配问题，或者两种测试库混用的细节没处理好。下面分步骤解决：

1. 先定位错误根源 #

找到抛出错误的测试用例，看清楚是哪一行getByText（或类似文本查询方法）触发的。RTL的错误信息里会列出所有匹配的元素，你可以根据这些信息找到页面上重复出现目标文本的位置，明确问题出在哪个组件/测试逻辑里。

2. 调整RTL的查询逻辑 #

针对多个匹配元素的场景，你有几种靠谱的处理方式：

• 改用批量查询方法：用getAllByText或queryAllByText获取所有匹配元素，再通过索引、属性筛选出你需要的那个：

  // 获取所有匹配文本的元素，取第一个
  const targetElements = screen.getAllByText('提交');
  const submitButton = targetElements[0];
  

• 结合自定义testId缩小范围：既然你已经把RTL的testId属性改成了data-my-test-id，可以结合它来精准定位：

  // 先找到父容器，再在容器内查文本，确保唯一匹配
  const formContainer = screen.getByTestId('login-form');
  const submitButton = within(formContainer).getByText('提交');
  

• 添加语义化筛选条件：比如结合元素的role属性（符合RTL模拟真实用户操作的理念）：

  // 同时匹配文本和按钮角色，避免和其他文本重复
  const submitButton = screen.getByRole('button', { name: '提交' });
  

3. 检查Enzyme和RTL的混用细节 #

虽然你配置的testIdAttribute是RTL专属的，不会影响Enzyme，但要注意两个库的渲染逻辑不要混着用：

• 不要在同一个测试用例里同时用Enzyme的shallow/mount和RTL的render，这可能导致DOM环境冲突，间接引发查询异常。
• Enzyme里如果要查自定义testId，直接用CSS选择器语法即可，和RTL的配置不冲突：

  // Enzyme查询自定义testId的方式
  wrapper.find('[data-my-test-id="login-form"]');
  

4. 优化你的setup配置（可选） #

你的setup代码没问题，只是可以把变量名改得更清晰，避免混淆：

const { configure: configureEnzyme } = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");
import { configure as configureRTL } from "@testing-library/react";

window.__config = {};
// 配置RTL使用自定义testId属性
configureRTL({ testIdAttribute: "data-my-test-id" });
// 配置Enzyme适配器
configureEnzyme({ adapter: new Adapter() });

额外提示 #

RTL的设计初衷是模拟用户真实操作，所以优先用文本、角色这些用户能看到的标识来查询，只有在元素没有明确语义（比如纯装饰性元素）时才用testId。如果你的测试经常遇到重复文本的问题，也可以考虑优化组件的语义化（比如给按钮添加清晰的aria-label），从根源减少查询冲突。

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