javascript - 第二次相同的 `queryByText()` 语句失败

Question

为什么即使这些调用之间没有任何动作或状态更改，queryByText第二次调用相同的函数也会给出结果？null

it('should ...', async () => {
    ...
    userEvent.upload(fileInput, file);
    await waitFor(() => expect(screen.queryByText('Import')).not.toBeDisabled());
    userEvent.click(screen.queryByText('Import')); // <- fails here cause the same as above queryByText returns null
    // Type 'null' is not assignable to type 'TargetElement'
    ...
});

如果我把screen.debug()，await waitFor它说按钮肯定在那里：

Answer 1

我没有注意到，错误Type 'null' is not assignable to type 'TargetElement'实际上来自打字稿编译器，它不是运行时错误。

userEvent.click()不期望HTMLElement | null来自的类型queryByText。所以解决方案就是这样转换：screen.queryByText('Import') as HTMLElement

Answer 2

queryBy*是这里的错误查询。它应该只用于为可能存在的元素添加额外的断言或断言文档中不存在的元素。

getBy*查询应该用于获取您假设存在的元素。如果找不到元素或您的查询不明确（即多个元素与查询匹配），它会通过抛出错误来断言此假设是正确的。