Inline Snapshot won't be written into the source code

[kwiat1990]

Describe the bug

After update to Vitest 0.25.1 inline snapshot don't get written in the source code as usual, so that expect(container).toMatchInlineSnapshot(); stay always empty. At the same time, in case the under the hood generated snapshot has changed, Vitest will output an error in the console with both expected and received content.

Reproduction

Install Vitest 0.25.1 and try to generate an inline snapshot for this component:

// component spinner.tsx
export function Spinner() {
  return (
    <svg
      className="currentColor -ml-1 mr-3 h-5 w-5 animate-spin"
      fill="none"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <title>Loading spinner</title>
      <circle
        className="opacity-25"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      ></circle>
      <path
        className="opacity-75"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        fill="currentColor"
      ></path>
    </svg>
  );
}

// test spinner.test.tsx
import { render } from "@testing-library/react";
import { Spinner } from "./spinner";

describe("<Spinner />", () => {
  it("should match snapshot", () => {
    const { container } = render(<Spinner />);
    expect(container).toMatchInlineSnapshot();
  });
});

vitest.config.ts:

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./test/setup-test-env.ts"],
    include: ["./app/**/*.{test,spec}.{js,ts,jsx,tsx}"],
    watchExclude: [".*\\/node_modules\\/.*", ".*\\/build\\/.*"],
    clearMocks: true,
    mockReset: true,
    restoreMocks: true,
  },
});

System Info

System:
    OS: macOS 13.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 5.52 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 3.2.1 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.13.2 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Brave Browser: 105.1.43.93
    Chrome: 107.0.5304.110
    Firefox: 105.0.3
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-react: ^2.2.0 => 2.2.0 
    vitest: ^0.25.1 => 0.25.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[kwiat1990]

I have multiple updates behind me and with those packages it still doesn't work:

"@vitejs/plugin-react": "^4.0.1",
"@vitest/coverage-c8": "^0.32.2",
"@vitest/ui": "^0.32.2",

Normal snapshots, which get written into external files work but inline snapshots doesn't get written into the test file. At the same time Vitest does know if an inline snapshot has changed or not and correctly it throws an error if it did.

[luin]

@kwiat1990 I encountered the same issue. Did you find any workarounds?

[luin]

I added a try/catch around await saveInlineSnapshots(this._environment, this._inlineSnapshots) in @vitest/snapshot and got the following exception:

SyntaxError: The requested module '/node_modules/magic-string/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.umd.js?v=48b2e464' does not provide an export named 'encode'

I'm using the browser mode, not sure if it's related. My vitest version is 0.33.0.

[kwiat1990]

@kwiat1990 I encountered the same issue. Did you find any workarounds?

I didn’t. In some files it does work, in others not. It found it pretty odd and it’s normal snapshots, which save output into a file.

[motss]

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
SyntaxError: The requested module '/node_modules/.pnpm/@jridgewell+sourcemap-codec@1.4.15/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.umd.js?v=3062f9de' does not provide an export named 'encode'
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

I got the error above when using .toMatchInlineSnapshot(). #4867 could be related?

Update: The error was from a package called magic-string.

Uncaught (in promise) SyntaxError: The requested module '/node_modules/.pnpm/@jridgewell+sourcemap-codec@1.4.15/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.umd.js?v=3062f9de' does not provide an export named 'encode' (at magic-string.es.mjs?v=3062f9de:1:10)

[christoph-pflueger]

I'm experiencing the same issue with and without -w. toMatchSnapshot works while toMatchInlineSnapshot either causes the test to be stuck or reports

SyntaxError: The requested module '/@fs/home/[...]/node_modules/.pnpm/@jridgewell+sourcemap-codec@1.4.15/node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.umd.js?v=34dbe1c7' does not provide an export named 'encode'

node v21.5.0
vitest v1.1.3
@vitest/browser v1.1.3
playwright v1.40.1

[sheremet-va]

Cannot reproduce the bug mentioned in the description of this issue anymore. Please, if you have a similar bug, open another issue with reproduction.