我想Assert一个元素永远不会出现在我的文档中。我知道我可以做this:
import '@testing-library/jest-dom/extend-expect'
it('does not contain element', async () => {
const { queryByText } = await render(<MyComponent />);
expect(queryByText('submit')).not.toBeInTheDocument();
});
但是在我的例子中,我需要等待,以确保元素不会在延迟后被添加。
3条答案
按热度按时间u2nhd7ah1#
There are two ways to do this, both involving
react-testing-library
's async helper functionwaitFor
.The first and simpler method is to wait until something else happens in your document before checking that the element doesn't exist:
You can use the same strategy with any valid Jest assertion:
If there isn't any good assertion you can use to wait for the right time to check an element does not exist, you can instead use
waitFor
to repeatedly check that an element does not exist over a period of time. If the element ever does exist before the assertion times out, the test will fail. Otherwise, the test will pass.You can adjust the amount of time
waitFor
will keep checking and how frequently it will check using thetimeout
andinterval
options. Do note, though, that since this test waits untilwaitFor
times out for the test to pass, increasing thetimeout
option will directly increase the time this test takes to pass.And here is the helper function I wrote to avoid having to repeat the boilerplate:
Which is then used like so:
xwbd5t1u2#
我们使用普通JavaScript,@Nathan中的expectNever函数会抛出一个错误:
我修改了它,使其看起来和感觉更像waitFor,这是可行的:
hgtggwj03#
下面是一个示例函数,用于异步检查不应显示的元素。它将首先执行同步检查,然后执行时间最短的异步检查,然后等待所需的时间量,然后再次检查(默认为50ms)。
此示例在内部使用"queryByTestId."您可以将其抽象出来,或者只进行修改以适合您所需得测试库选择器类型.
此代码假定使用react测试库。