Test

React Test

https://github.com/facebook/create-react-app/issues/3482#issuecomment-347347454

The problem is your test is now asynchronous but you don’t wait for it to finish. So by the time the callback runs, the environment is already cleaned up.

image.png
产生原因:expect 的 内容为异步操作,需要等待
image.png
典型,findByText 由于动画原因,会变为异步操作,需要 await 直到成功或失败,不加 await 会 pedding,且可能在 testing-library 自动 cleanup 后执行,导致环境中的操作内容已经丢失。

Disappearence

  1. // expect(
  2. // await screen.findByText('当前表中包含主键,分布键只能在主键中选择'),
  3. // ).not.toBeInTheDocument();
  4. await waitFor(() => {
  5. expect(
  6. screen.queryByText('当前表中包含主键,分布键只能在主键中选择'),
  7. ).not.toBeInTheDocument();
  8. });

within

在某个DOM中寻找:

  1. const selectOptions = baseElement.querySelector<HTMLElement>(
  2. '.rc-virtual-list-holder-inner',
  3. )!;
  4. const elm1 = await within(selectOptions).findByText('111');
  5. expect(elm1.parentElement!.textContent).toEqual('111不支持');
  6. const elm2 = await within(selectOptions).findByText('333');
  7. expect(elm2.parentElement!.textContent).toEqual('333主键');