Snapshots are tiny / being resized

[joshvillbrandt]

Hello!

I have a few full-page tests with a storybook viewport typically set to 2160 x 1440 pixels. The subsequent image that is generated on my filesystem is only 720 x 480 pixels, however. This is exactly a 3x reduction of the original value in both dimensions.

I am specifying the view port similar to this:

import { INITIAL_VIEWPORTS } from "storybook/viewport";

export const Default: Story = {
  tags: ["snapshot"],
  parameters: {
    viewport: {
      options: {
        ...INITIAL_VIEWPORTS,
        test: {
          name: "Test",
          styles: {
            width: `1440px`,
            height: `2160px`,
          },
        },
      },
      defaultViewport: "test",
    },
  },
  args: {},
};

I'm hoping someone can help me figure out why this image is being reduced in size and how I can prevent it.

Things I've tried:

1. Increasing the viewport size as implemented above yields similarly resized images. For example, bumping this up to 2880 x 1920 still yields a 720 x 480 image, which is a 4x reduction in each dimension. Varying the height and width independently does yield different final image dimensions that are similarly small.
2. I've tried setting the browser viewport directly in my vitest browser configuration.
3. I've poured over the source code in the repo without luck. The compare_image.ts file seems to be the most interesting of the bunch, but I can't detect any explicit resizing commands besides matching the baseline and results images.

[unional]

Have you tried setting the playwright function viewport option?

The view port is scaled by Vitest.

Seems like they are reverting that behavior:
See vitest-dev/vitest#9072

[joshvillbrandt]

Ooo! It's working now.

I had tried two locations for setting the viewport in the vitest config, but it seems a magical browser.instances[0].context.viewport was the magic one that worked. It didn't help that vitest is now defaulting to v4 of the docs, but I needed the v3 browser playwright docs.

I have included a snippet below in case others come across this. The snippet includes the two bad/not helpful viewport declarations as well as the one helpful one.

Thanks so much for the quick response and assistance!! 🙌🙌

vite.config.ts:

import { defineConfig } from "vitest/config";
// other imports

export default defineConfig({
  // other config stuff

  test: {
    projects: [
      // node tests for utils and services
      {
        extends: true,
        test: {
          include: ["utils/**/*.test.ts?(x)", "services/**/*.test.ts?(x)"],
          environment: "jsdom",
        },
      },
      // storybook stories
      {
        extends: true,
        plugins: [
          storybookTest({
            configDir: path.join(dirname, ".storybook"),
          }),
          storybookVis(),
        ],
        test: {
          name: "storybook",
          browser: {
            enabled: true,
            headless: true,
            provider: "playwright",
            viewport: { width: 1440, height: 2160 },
            instances: [
              {
                browser: "chromium",
                viewport: { width: 1440, height: 2160 },
                context: {
                  // this below is the one that works!
                  viewport: { width: 1440, height: 2160 },
                },
              },
            ],
          },
          setupFiles: ["./.storybook/vitest.setup.ts"],
        },
      },
    ],
  },
});