与Waitfor一起使用的异步故事书测试

Question

当我在本地运行test-Storybook时，以下测试通过，我的色度构建步骤通过，但是在Bitbucket管道中，此测试失败了。我想这与异步和waitfor有关。有人知道如何解决这个问题吗？

顺便说一句，使用async/等待和getComputedStyle是首先使这些测试工作的唯一方法。 期望... tohavestyle不起作用。

const statuses = ['Open', 'In Progress', 'Cancelled', 'Closed'];
export const Default: PlayableStory = {
  args: {
    title: 'Filter by status',
    options: statuses.map(status => ({ value: status, label: status })),
  },
  play: async () => {
    const { getByText } = screen;
    statuses.forEach(status => expect(getByText(status)).toBeInTheDocument());

    const unSelectedBackgroundColor = 'rgba(0, 0, 0, 0)';
    const selectedBackgroundColor = 'rgba(0, 0, 0, 0.08)';

    async function expectChipSelected(text: string, selected = true) {
      await waitFor(() => {
        const chip = screen.getByRole('button', { name: text });
        expect(getComputedStyle(chip).backgroundColor).toEqual(
          selected ? selectedBackgroundColor : unSelectedBackgroundColor,
        );
      });
    }

    // select one
    await expectChipSelected(statuses[0], false);
    fireEvent.click(getByText(statuses[0]));
    await expectChipSelected(statuses[0]);
    
    // and more similar tests
  },
};

以及相关的管道步骤（我认为从某个地方复制了Collomatic的文档）

- step:
    name: 'Run storybook tests'
    caches:
      - node
    script:
      - npm install --legacy-peer-deps
      - npx playwright install --with-deps
      - npm run build-storybook --silent
      - npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
          "npx http-server storybook-static --port 6006 --silent" \
          "npx wait-on tcp:6006 && npm run test-storybook"