Hi @asvetliakov
I having problem using TypeScript snapshot when setting VSCode typescript to 4.0.2?

Are there any workaround recently for this?

Hello,

I'm using a VSCode plugin that seems to be obsolete and referring to this instead, so I'm hoping the fix is the same.

I'm using a library called chai-jest-snapshot and my snapshot files are in the same directory as my test files:

├── App
    ├── App.js
    ├── App.spec.js
    └── App.spec.js.snap

This is giving me errors Corresponding snapshot doesn't exist and The snapshot is redunant.

Test name and snapshot name e.g.

describe(`App Component`, function () {
    it(`renders a header as fifth child`

and

exports[`App Component renders a header as fifth child 1`] = `

I've the following settings:

{
  "snapshotTools.snapshotDir": "./",
  "snapshotTools.testFileDir": "./",
  "snapshotTools.testMethods": [
    "test",
    "it",
    "fit",
    "xit",
    "xtest",
    "it.only"
  ]
}

Some projects define tests in a way that trips up the static analysis used to tie test cases to snapshots, causing active snapshots to be incorrectly marked as redundant. My project uses a wrapper around it(). #1 is another example of such a configuration.

A simple work-around that would help me a lot is the ability to turn off the "The snapshot is redundant" warnings. That way, at least you don't get false positive warnings.

In this talk the creator was talking about a package of his that unfortunately never materialized, but with the powers VS code gives you I feel like you could produce the same features here 😄

https://youtu.be/HAuXJVI_bUs?t=22m4s

this does not work, its possible to write tests like this:

[1,2,3,4].map(i=> {
  it(`is dynamic test name ${i}`, ()=> {
    expect(i+5).toMatchSnapshot();
  })
});

do you think it would be hard to add support for this case?

Somewhat related to #1, but this doesn't involve resolving variable names.

When writing tests, I often end up with long test titles. If I break up the test titles into multiple lines of concatenated strings, this plugin fails to match the test to the snapshot. With prettier defaulting to 80 chars per line, it's common in my project to split a test title.

  it(
    `should error if the sun is blue and the moon is green but user doesn't have` +
      ` binoculars or a telescope`,
    async () => {
    ...
    expect(response).toMatchSnapshot();  // fails to show corresponding snapshot
  });

Thanks for considering!

VS Code 1.72.2
Plugin version: 0.4.0

This was working initially, but at some point along the way in my project I guess it stopped.

I just tried to use it and am now only seeing the Jest help on .toMatchSnapshot() hover

(method) jest.Matchers<void, GetRequestResponse>.toMatchSnapshot(snapshotName?: string | undefined): void (+1 overload)
This ensures that a value matches the most recent snapshot.

Check out [the Snapshot Testing guide](vscode-file://vscode-app/c:/Program%20Files/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-sandbox/workbench/workbench.html) for more information.

Likewise, ctrl+click on .toMatchSnapshot() navigates to @types/jest/index.d.ts -> jest -> matchers -> toMatchSnapshot.

I tried adding the plugin to my tsconfig.json under compilerOptions:

"plugins": [{
  "name": "typescript-snapshots-plugin",
  "snapshotDir": "__snapshots__",
  "snapshotCallIdentifiers": [
      "toMatchSnapshot"
  ]
}]

I also clicked the TypeScript section of VSCode status bar and made sure it's using the workspace version and the correct tsconfig.json.

I've restarted the TypeScript sever afterwards, reloaded the window, even quit and restarted and the issue still persists.

When using Storybook with the Storyshots addon, stories are turned into Jest snapshot tests with a snapshot file extension of '.storyshot'. The reason for them using different suffix is so that storyshots is able to identify orphaned snapshot files that came from their plugin rather than the normal jest tests.

As a result, we have both '.snap' and '.storyshot' snapshot files. It would be nice to be able to configure the plugin to identify the '.storyshot' files as also being snapshot files.

Thanks for making this tools, its really helpful.

But I unable to use it on my TypeScript project which generates JS. Im not using ts-jest so the snapshot generated was: <my spec file>.js.snap
When I rename the snapshot file into <my spec file>.ts.snap it showing properly. Any workaround on this issue?

Hi. Not sure why I can't make this work in vscode.

This is my tsconfig.json

"plugins": [
      {
        "name": "typescript-snapshots-plugin",
        "snapshotCallIdentifiers": ["matchSnapshot"]
      }
    ]

this is my tasks.json

{
  "version": "0.1.0",
  "command": "./node_modules/.bin/tsc",
  "isShellCommand": true,
  "args": ["-w", "-p", "./tsconfig.json"],
  "showOutput": "silent",
  "isBackground": true,
  "problemMatcher": "$tsc-watch"
}

I have my environment set to local Typescript "2.7.2"

and this is the test file:

it ('ok', () => {
   'test'.should.matchSnapshot();
})

I have no options for snapshot when hovering over matchSnapshot

Maybe I'm mistaken but it seems that not in root tests dir are not picked up.

For example in the following the lib/extractor/__test__/unit/generics/alias.spec.ts does not match up with lib/extractor/__test__/unit/generics/__snapshots__/alias.spec.ts.snap

Hey there great plugin, love it thanks for your work! 👏 👏 👏

I'm running into an issue though where an HTML-like thing is saved in a snapshot and then the rest of the syntax highlighting gets messed up for the entire file. I'm not sure how it all works, but perhaps it'd be better to identify the string ranges first and then apply syntax highlighting if possible?

Example

exports[`file should handle HTML-like stuff 1`] = `"<input id=\\"label-text-input\\" type=\\"text\\">"`;

exports[`file should handle HTML-like stuff 2`] = `now everything is ugly for the rest of the file :(`;

The plugin does not allow assertion name usage.

test('SchedulerSelector monthly selection process selection should work properly', () => {
  const component = renderer.create(
    <SchedulerSelector />,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot('Original print');

  tree.children[0].props.onClick();
  tree = component.toJSON();
  expect(tree).toMatchSnapshot('After selector clicked');
});

That will print following snapshots:

exports[`SchedulerSelector monthly selection process selection should work properly: After selector clicked 1`] = `...`;
exports[`SchedulerSelector monthly selection process selection should work properly: Original print 1`] = `...`;