SnapshotCodeLensProvider crashes when working with TypeScript files

[trixnz]

Environment

1. node -v: v9.4.0

2. npm -v: 6.2.0

3. npm ls jest or npm ls react-scripts (if you haven’t ejected): [email protected]

4. Operating system: Windows 10

Prerequisite

• are you able to run jest test from command line? yes
• how do yo run your tests from command line? (for example: npm run test or node_modules/.bin/jest) npm run test

Steps to Reproduce

Repo: https://github.com/trixnz/vscode-jest-ts-repro

Simply open the checked out repro in vscode, wait for the initial tests to run in the background and observe the following error in the developer console:

  ERR Unexpected token (2:11): SyntaxError: Unexpected token (2:11)
	at Parser.pp$5.raise (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:4454:13)
	at Parser.pp.unexpected (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:1761:8)
	at Parser.pp$1.parseClassBody (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:2554:14)
	at Parser.pp$1.parseClass (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:2406:8)
	at Parser.pp$1.parseStatement (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:1843:19)
	at Parser.parseStatement (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:5910:22)
	at Parser.pp$1.parseBlockBody (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:2268:21)
	at Parser.pp$1.parseTopLevel (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:1778:8)
	at Parser.parse (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:1673:17)
	at parse (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\babylon\lib\index.js:7305:37)
	at Snapshot.exports.getASTfor.file [as _parser] (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\jest-editor-support\build\parsers\babylon_parser.js:29:50)
	at Snapshot.getMetadata (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\node_modules\jest-editor-support\build\Snapshot.js:108:27)
	at SnapshotCodeLensProvider.provideCodeLenses (C:\Users\Cam\.vscode-insiders\extensions\orta.vscode-jest-2.9.0\out\src\SnapshotCodeLens\SnapshotCodeLensProvider.js:23:26)

This exception propagates and will break other features of the extension, most obvious to me was the code coverage overlay. Setting jest.enableSnapshotPreviews to false will fix it in the interim.

Of Note: JavaScript compatible TypeScript will work fine. The repro includes some TypeScript specific syntax to trigger the issue.

Expected Behavior

The snapshot code lens provider should pass a custom parser into the jest-editor-support.Snapshot constructor to allow Typescript to be parsed.

Actual Behavior

The default parser in jest-editor-support.Snapshot (babylon) is used instead, and throws SyntaxErrors on TypeScript code.

[dinofx]

Would turning on the typescript plugin be a problem?

class SnapshotCodeLensProvider implements vscode.CodeLensProvider {
  public provideCodeLenses(document: vscode.TextDocument, _token: vscode.CancellationToken) {
    function parseTS(file: string) {
      return parse(readFileSync(file, 'utf8'), { sourceType: 'module', plugins: ['typescript'] });
    }
    const snapshots = new Snapshot(parseTS);

I tried this out and it supported most TS syntax. Newer syntax like asserts causes problems, but turning on errorRecovery could help.

[dinofx]

@connectdotz Does the above make sense? I could open a PR or investigate some other approach.

[connectdotz]

hey @dinofx and @trixnz sorry somehow I didn't see this issue until now, yes this is not good and probably is related our recent switch to babel typescript parser... @dinofx it will be great for a PR 👍

[update]
However, I think it is probably best not to pass the parseTS as an argument as it is more expensive than the original snapshot parsing... I am wondering

1. if it can be parsed before by js parser, what is the actual cause of this exception
2. by always enable the typescript plugin, will it break other snapshots?

let's dig a bit further to see if we can understand this problem better...?

[dinofx]

I think the flow and typescript plugin are mutually exclusive. I’m not sure if Babel parser includes the flow plugin by default, but we could look at the file’s path and use the extension to decide when to add the typescript plugin. Of course, the same could also be done in jest-editor-support, but ideally you’d use typescript rather than Babel to parse typescript. I noticed that the ‘asserts’ syntax from TS 3.7 still caused problems.

[dinofx]

jest-community/jest-editor-support#51 is related. This package is written in TypeScript. Is it not annoying that you can't even self host your own unit tests?

[connectdotz]

@dinofx @trixnz I tried the test repo above with the v4.0.0-alpha.1 today and all appears to be working, no error in the developer console... Can you guys give it a try and let us know the result?