Inline Snapshots with non literal can't be found

[elicwhite]

🐛 Bug Report

When I try to add a test with an inline snapshot:

it('works with inline snapshots', () => {
  expect({a: 1}).toMatchInlineSnapshot();
});

I get this error:

Jest: Couldn't locate all inline snapshots.

I can't repro this in repl.it because that version does not have inline snapshots yet:

TypeError: expect(...).toMatchInlineSnapshot is not a function

I cloned the github repo and added a test to inline_snapshots.test.js

test('saveInlineSnapshots() replaces empty function call with a template literal for objects', () => {
  const filename = path.join(__dirname, 'my.test.js');
  fs.readFileSync = (jest.fn(
    () => `expect({a: 'a'}).toMatchInlineSnapshot();\n`,
  ): any);

  saveInlineSnapshots(
    [
      {
        frame: {column: 11, file: filename, line: 1},
        snapshot: `{a: 'a'}`,
      },
    ],
    prettier,
    babelTraverse,
  );

  expect(fs.writeFileSync).toHaveBeenCalledWith(
    filename,
    "expect({a: 'a'}).toMatchInlineSnapshot(`{a: 'a'}`);\n",
  );
});

and this reproes the issue:

 FAIL  packages/jest-snapshot/src/__tests__/inline_snapshots.test.js
  ✓ saveInlineSnapshots() replaces empty function call with a template literal (67ms)
  ✕ saveInlineSnapshots() replaces empty function call with a template literal for objects (19ms)
  ✓ saveInlineSnapshots() replaces existing template literal - babylon parser (4ms)
  ✓ saveInlineSnapshots() replaces existing template literal - flow parser (2ms)
  ✓ saveInlineSnapshots() replaces existing template literal - typescript parser (2ms)
  ✓ saveInlineSnapshots() replaces existing template literal with property matchers (3ms)
  ✓ saveInlineSnapshots() throws if frame does not match (2ms)
  ✓ saveInlineSnapshots() throws if multiple calls to to the same location (2ms)
  ✓ saveInlineSnapshots() uses escaped backticks (2ms)

  ● saveInlineSnapshots() replaces empty function call with a template literal for objects

    Jest: Couldn't locate all inline snapshots.

      at Object.parse (packages/jest-snapshot/src/inline_snapshots.js:168:11)

[SimenB]

@azz

[azz]

Looking into it. If you change the test to say column: 18 it passes.

[azz]

Can't reproduce, even with an e2e test:
azz@6aab35c#diff-c11487324544dcc655192a3678badb27

[elicwhite]

Hmm. I wonder why I was hitting this in our test suite at Facebook then with that same error Jest: Couldn't locate all inline snapshots..

Do you have any debugging recommendations?

[azz]

You want to determine why this line is not matching.

https://github.com/facebook/jest/blob/0f525c54f268a16b0a7c2de66c3354ec25453e24/packages/jest-snapshot/src/inline_snapshots.js#L137

It could be related to source maps, or a flow parser bug reporting an incorrect location for an AST node.

[brunoreis]

expect(result)... 

works ( 1 snapshot updated. )

expect( result )... 

doesn't work ( Jest: Couldn't locate all inline snapshots. )

[jack-wood]

Debugging where @azz indicated I found the column value to be the mismatch.
This was because my prettier.config had tabWidth set to 4 meaning the column was 17 not 15 which is what was inputted into groupedSnapshots.

Changing the config to use tabWidth 2 fixed this so looks like generator is not picking up values from the prettier config in my case tabWidth.

[elicwhite]

I just ran into this again with:

  it('foo', () => {
    const fixture = fixtures['SINGLE_COMPONENT_WITH_BOOLEAN_PROP'];
    expect(schemaValidator.validate(fixture)).toMatchInlineSnapshot();
    // -------------------------------------------------------^
  });

Adding a console.log for groupedSnapshots, I get

{ '20:63': [ { frame: [Object], snapshot: 'Array []' } ] }

which points to the p of Snapshot.

---

On this line:

const snapshotsForFrame = groupedSnapshots[`${line}:${column}`];

${line}:${column} points to the correct location in the source file(20:46), but doesn't match the item in groupedSnapshots. Tracing the invalid data back, the snapshots argument passed to saveInlineSnapshots has the wrong location:

{
  "path/__tests__/MyFile-test.js": [
    {
      "frame": {
        "line": 20,
        "column": 64,
        "file": "path/__tests__/MyFile-test.js",
        "function": "Object.<anonymous>"
      },
      "snapshot": "Array []"
    }
  ]
}

It looks like that data flows in from this code: https://github.com/facebook/jest/blob/master/packages/jest-snapshot/src/State.js#L93-L95

It is creating a new Error() and using that to get the line information which is wrong.

[ 
  'Error',
  '    at SnapshotState._addSnapshot (projectroot/node_modules/jest-snapshot/build/State.js:60:38)',
  '    at Object.throwingMatcher [as toMatchInlineSnapshot] (projectroot/node_modules/expect/build/index.js:321:33)',
  '    at Object.<anonymous> (projectroot/__tests__/MyFile-test.js:20:64)' 
]

I'm not familiar with what is responsible for the line numbers that get calculated for error stack frames so my debugging ends there. Any ideas?

[kristerkari]

I'm also getting the error Jest: Couldn't locate all inline snapshots. when using inline snapshots in a React Native (v0.56.0) project.

The interesting thing is that the inline snapshot works when rendering a component with react-test-renderer, but fails for anything else.

[SimenB]

I'm not familiar with what is responsible for the line numbers that get calculated for error stack frames so my debugging ends there. Any ideas?

Sourcemaps must be setup correctly, then it's https://github.com/evanw/node-source-map-support