[Bug]: Prettier v3 doesn't work with jest-snapshots

[TAGraves]

Version

29.6.1

Steps to reproduce

1. Install prettier@3.0.0, which was just released yesterday
2. Write a test that would generate an inline snapshot, like:

test('snapshot', () => {
  expect('abc').toMatchInlineSnapshot();
});

Expected behavior

The inline snapshot is updated

Actual behavior

Jest fails with

  ● Test suite failed to run

    TypeError: prettier.resolveConfig.sync is not a function

      at runPrettier (node_modules/jest-snapshot/build/InlineSnapshots.js:308:30)

Additional context

Prettier just released v3, which removed this line that added the sync function to resolveConfig. It looks like eslint-plugin-prettier ran into a similar problem. based on this issue.

Environment

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
    pnpm: 8.5.1 - ~/Library/pnpm/pnpm
  npmPackages:
    jest: ^29.6.0 => 29.6.1

[mrazauskas]

Confirmed: if Prettier v3 is installed, Jest fails to update or create inline snapshots. Existing inline snapshots work fine if they are passing.

Seems like this is similar to what eslint-plugin-prettier was facing – TypeError: prettier.resolveConfig.sync is not a function. See prettier/eslint-plugin-prettier#562

[mrazauskas]

Seems like it is possible to add prettierPath: null to Jest config. Formatting can be done using Prettier outside of Jest run. That can be a workaround until solution will be found.

[SimenB]

I doubt we'll ever support Prettier v3 as we need it to work synchronously.

However, we might be able to add support for @prettier/sync.

[SimenB]

That module is currently broken (prettier/prettier-synchronized#5), but I think it should work after that is released. We'll then have to look at the version of prettier we load, and decide which API to use

[mrazauskas]

@prettier/sync is hardcoding the path to prettier, so it will not work with prettierPath option. I was thinking, what if we would vendor it and adjust to the needs of Jest.

[fisker]

Maybe @prettier/sync shoud expost a factory to accept prettierPath instead?

[mrazauskas]

That would great, of course.

[SimenB]

Right, good point.

Passing a path for prettier sounds reasonable 👍

[SimenB]

With the release of that, we should be able to integrate here.

[SimenB]

FWIW, added an explicit error in https://github.com/jestjs/jest/releases/tag/v29.6.2, and updated the docs with workarounds

[ctsstc]

For anyone that lands here for a temporary fix, this works for now:

1. Manually add "prettier-2": "npm:prettier@^2", to devDependencies in your package.json
2. Run npm install
3. Add prettierPath to your jest configuration
   • ie: "prettierPath": "<rootDir>/node_modules/prettier-2/index.js"

[ecraig12345]

The suggestion above is a good idea, but it may have some problematic side effects: if prettier and prettier-2 are installed in devDependencies of the same package, some package managers (definitely yarn 1, likely others too) will nondeterministically choose which prettier binary (from v2 or v3) to link under node_modules/.bin. So it may appear to work at first, but then cause errors or mysterious inconsistencies in CI or on someone else's computer.

I wish I could think of a better way around this, but the best I can come up with is a postinstall script to fix the link if needed:

const path = require('path');
const fs = require('fs');

// TODO: Update this to point to your node_modules path relative to the script location
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const prettierBinPath = path.join(nodeModulesPath, '.bin/prettier');

if (fs.realpathSync(prettierBinPath).includes('prettier-2')) {
  fs.rmSync(prettierBinPath);
  const packageJson = JSON.parse(fs.readFileSync(path.join(nodeModulesPath, 'prettier/package.json'), 'utf-8'));
  const binFile =
    typeof packageJson.bin === 'string' ? packageJson.bin : packageJson.bin.prettier;
  const realBinPath = path.join(nodeModulesPath, 'prettier', binFile);
  fs.symlinkSync(realBinPath, prettierBinPath);
}

[louisgv]

Easiest would be to make toMatchInlineSnapshot async. But that's horribly breaking

Maybe making a new toMatchInlineSnapshotAsync?

[OmarJaroudi]

@SimenB Just curious about when/how the release process works to publish a new version with the changes merged in #14566, thanks!

[SimenB]

It'll be in Jest 30. Not sure when there'll be a release, but within the next few weeks, hopefully 🙂

[benjamin-guibert]

Thanks for the good work! 💪🏻

[Dzieni]

@SimenB Do you know already when Jest v30 will be released? Is there some nightly release that I can install right now and use Prettier v3?

[SimenB]

I don't have a firm date in mind, but I can probably do a prerelease.

Nightlies would be awesome (or CI publishing in general), but we don't have that at the moment, unfortunately.

[SimenB]

https://github.com/jestjs/jest/releases/tag/v30.0.0-alpha.1

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.