Support disabling animations

[silicakes]

Is your feature request related to a problem? Please describe. When running tests against image snapshots, I often come across discrepancies that stem from animated parts being in different phases. Things like charts, graphs and even animated modals, can be phased out from the original snapshot which causes it to fail due to a too big of a difference

Describe the solution you'd like @playwright/test has a solution where they allow you to disable animation in the following manner

animations "disabled"|"allow" (optional) When set to "disabled", stops CSS animations, CSS transitions and Web Animations. Animations get different treatment depending on their duration: finite animations are fast-forwarded to completion, so they'll fire transitionend event. infinite animations are canceled to initial state, and then played over after the screenshot. Defaults to "disabled" that disables animations.

Describe alternatives you've considered Currently, I've implemented a sleep function that waits for all animations to be exhausted, which for obvious reasons, makes testing very slow:

const sleep = (ms: number) =>
  new Promise((resolve) => setTimeout(() => resolve(void 0), ms));

const config: TestRunnerConfig = {
  setup() {
    // using jest-image-snapshot
    expect.extend({ toMatchImageSnapshot });
  },
  async postRender(page, context) {
    const elementHandler = await page.$("#storybook-root");
    if (!elementHandler) throw new Error("No strybook root found");

   // no reason for this atm tbh
    await page.waitForLoadState("networkidle");

    // waiting for animations to complete
    await sleep(3000);
    const image = await page.screenshot();
    expect(image).toMatchImageSnapshot({
      customDiffDir,
      customSnapshotIdentifier: context.id,
      failureThreshold: 0.01,
      failureThresholdType: "percent",
    });
  },
};

Additional context I'd love your advice on alternative implementations, even if this feature is currently missing or not planned.

[blarson-hearst]

I think this should work to add to your config file if your animations are pure CSS.

use: {
  contextOptions: {
    reducedMotion: 'reduce',
},

Unfortuantely, not all JS animations will respect this, so you'll have to refer to their docs. React MUI for instance requires passing overrides to the ThemeProvider.