Jest测试Generate Wallet按钮时出现TypeError问题求助

在测试Solana钱包项目的「Generate Wallet」按钮功能时，触发TypeError: Cannot read properties of null (reading 'textContent')错误。点击按钮后页面本该显示12词助记词，但测试中通过data-testid="mnemonic-display"获取元素时返回null，无法读取其textContent属性。

解决方案 #

1. 等待异步操作完成后再获取元素 #

生成钱包属于异步操作（比如调用Solana助记词生成逻辑），按钮点击后DOM更新并非同步完成，直接获取元素会返回null。可以使用React Testing Library的异步查询方法：

• 使用findByTestId（自带异步等待）：

// 触发按钮点击
fireEvent.click(screen.getByRole('button', { name: /Generate Wallet/i }));
// 异步等待元素出现
const mnemonicElement = await screen.findByTestId('mnemonic-display');
expect(mnemonicElement.textContent).toMatch(/^\w+( \w+){11}$/);

• 或用waitFor包裹断言：

fireEvent.click(screen.getByRole('button', { name: /Generate Wallet/i }));
await waitFor(() => {
  const mnemonicElement = screen.getByTestId('mnemonic-display');
  expect(mnemonicElement.textContent).toBeDefined();
});

2. Mock异步生成函数，避免真实延迟 #

如果项目中生成助记词的函数是异步的，可在测试中mock它，让其同步返回预设数据，确保DOM能及时渲染：

// 假设生成逻辑在utils/wallet模块中
jest.mock('../utils/wallet', () => ({
  generateMnemonic: jest.fn().mockResolvedValue('apple banana cherry date elderberry fig grape honeydew iceberg jackfruit kiwi lemon')
}));

3. 检查业务代码的条件渲染逻辑 #

确认页面中mnemonic-display元素是否为条件渲染（比如{mnemonic && <div data-testid="mnemonic-display">{mnemonic}</div>}）：

• 确保测试中生成钱包的逻辑已执行完成，mnemonic状态有值后，元素才会挂载到DOM。

4. 排查测试环境的DOM状态 #

若以上方法无效，可在测试中打印当前DOM结构，确认元素是否真的被渲染：

fireEvent.click(screen.getByRole('button', { name: /Generate Wallet/i }));
console.log(document.body.innerHTML); // 查看元素是否存在于DOM中

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