Jest: Inline snapshot are broken when using latest prettier (2.1.0)

[iwazaru]

🐛 Bug Report

When using expect.toMatchInlineSnapshot using prettier 2.1.0, jest throws the following error:

 FAIL  src/App.test.tsx
  ● Test suite failed to run

    TypeError: Cannot read property 'start' of undefined

      at CallExpression (node_modules/jest-snapshot/build/inline_snapshots.js:217:57)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        4.224s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

To Reproduce

Steps to reproduce the behavior:

1. Create react app with typescript template (this is my env but I haven't tested without typescript)

yarn create react-app --template typescript

1. Write a test that generates a snapshot

// App.test.tsx
test('matches snapshot', () => {
  const { container } = render(<App />);
  expect(container).toMatchInlineSnapshot();
});

1. Add [email protected] and run test : it works

yarn add [email protected] -D
yarn test

1. Remove snasphot, add [email protected] and run test : it throws an error

yarn add [email protected] -D
yarn test

Expected behavior

Test should write a new snapshot like at step 3.

Link to repl or repo (highly encouraged)

https://www.github.com/iwazaru/jest-inline-snapshot-bug

envinfo

  System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v12.18.3/bin/npm

[SimenB]

I've bisected prettier, and the regression was introduced in https://github.com/prettier/prettier/pull/8678. Probably worth opening an issue in the prettier repo?

/cc @fisker @evilebottnawi @thorn0

Happy to change something here if our current implementation is buggy, of course

https://github.com/facebook/jest/blob/326b165642a6c87c6ebfcbb10544389aac5412bb/packages/jest-snapshot/src/inline_snapshots.ts#L197-L238

Specifically, it's the const {line, column} = callee.property.loc.start; line that fails

[fisker]

I don't know we use loc, sorry! I'll check how can you get that location info.

[fisker]

@SimenB I had a quick look, seems it's not only babel used (it's not safe anyway, not all parsers has location info), we don't use any location info inside Prettier, but we have range info parsers[inferredParser].locStart(node) and parsers[inferredParser].locEnd(node). Do you think it's better to calculate the location info here?

/cc @evilebottnawi @thorn0

[alexander-akait]

I'm afraid what we've done the breaking change, because it was a part of public API (and jest uses it)

[fisker]

AST property is not the part of API. That's why I propose use locStart and locEnd, they are.

[SimenB]

I'm happy to change here to use some other API (PR very much welcome!), but it might be best to reintroduce the loc field for now anyways as we won't be patching older versions of Jest

[fisker]

The only loc I removed from https://github.com/prettier/prettier/pull/8678 is for typescript parser, so for a quick fix, we may just need add this line back

Some other part in Prettier updates the range, so the location info still not "real", but it works that way before too.

[SimenB]

Reintroducing that line sounds good, and we can possibly migrate Jest over to use locStart and locEnd helpers so it can be removed from prettier in the future?

[fisker]

I'll add it back, and we might won't remove it(not too much cost), but as I said before

not all parsers has location info

So, we still better refactor in Jest.

[SimenB]

One thing to note is that CRA currently uses Jest 24. Upgrading to Jest 26 still fails though (and the linked fix in Prettier fixes it) due to the missing loc field. #10254 added a guard which makes the error be Jest: Couldn't locate all inline snapshots. rather than failing with a TypeError

[SimenB]

2.1.1 is released and updating fixes the reproduction in the OP. Thanks!