当我尝试测试我的组件的条件渲染时，我得到的结果是失败，即使它应该通过。
下面是我的组件：

import React, { useEffect, useState } from 'react';

export const Carousel = ({ skeleton }) => {
const [isLoading, setIsLoading] = useState(skeleton !== undefined);

useEffect(() => {
    setIsLoading(false);
}, [])

    return (
    <>
        <Skeleton data-testid="skeleton-wrapper" hidden={!isLoading} />
        <CarouselItem data-testid="carousel-wrapper" hidden={isLoading} />
    </>
  )
}

这就是测试：

it('should switch display property', async () => {
    renderWithTheme(
      <Carousel skeleton={<div>Skeleton children</div>}>
        <CarouselItem>Item 1</CarouselItem>
      </Carousel>,
    );

    expect(screen.getByTestId('skeleton-children')).not.toHaveAttribute('hidden');
    expect(screen.getByTestId('carousel-wrapper')).toHaveAttribute('hidden');
    await waitFor(() => expect(screen.getByTestId('skeleton-wrapper')).toHaveAttribute('hidden'));
    expect(screen.getByTestId('carousel-wrapper')).toBeVisible();
  });

测试失败，看起来skeleton-wrapper已经隐藏，而carousel-wrapper已经可见。
疯狂的部分是，如果我添加一个setTimeout，它会完美地工作。所以，如果我添加下面的代码，它可以完美地工作。如果有人有线索愿意分享我会很感激。

useEffect(() => {
  setTimeout(() => { 
    setIsLoading(false);
    }, 1
   )
}, [])

这是奇怪的，如果我添加下面的代码，它的工作完美。如果有人有线索愿意分享我会很感激。

useEffect(() => {
  setTimeout(() => { 
    setIsLoading(false);
    }, 1
   )
}, [])