Vscode-jest: !! context mismatched !! data nodes are different under "AppComponent: either different test count or with unknown locations within the block"

[bodote]

Environment

1. vscode-jest version: 4.0.1
2. node -v:v16.1.0
3. npm -v or yarn --version: 7.11.2 , Angular CLI: 12.0.0
4. npm ls jest or npm ls react-scripts (if you haven’t ejected):
   [email protected] /Users/bodo.teichmann/dev/learning/angular-jest-tutorial

├─┬ @angular-builders/[email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected] deduped
│ │ └─┬ [email protected]
│ │   └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]

1. your vscode-jest settings if customized:
   
   
   
   • jest.jestCommandLine? none/default
   
   
   • jest.autoRun?
   
   

"jest.autoRun": {
        "watch": true, 
        "onStartup": ["all-tests"]
     },

1. Operating system: MacOS 11.3.1 (M1)

Prerequisite

• are you able to run jest test from the command line? YES
• how do you run your tests from the command line? (for example: npm run test or node_modules/.bin/jest)
  ng test or jest works both

Steps to Reproduce

ng new angular-jest-tutorial
cd angular-jest-tutorial
ng add @briebug/jest-schematic

add in ./tsconfig.json: "types":[ "jest"], , only then , the vscode will use jest.expect() instead of jasmine.expect()

changed "it(" in src/app/app.component.spec.ts by "test(" on 3 occurences

Relevant Debug Info

vscode - Console: ("toggle developer tools") :
shows:

[/Users/bodo.teichmann/dev/learning/angular-jest-tutorial/src/app/app.component.spec.ts] !! context mismatched !! data nodes are different under "AppComponent: either different test count or with unknown locations within the block": source= {childContainers: Array(0), childData: Array(3), name: "AppComponent", zeroBasedLine: 12}
assertion= {childContainers: Array(0), childData: Array(1), name: "AppComponent", zeroBasedLine: 4287}

Expected Behavior

all 3 default tests in app.component.spec.ts (as were created by ng new angular-jest-tutorial )
should have a green ✓ on the left before line numbers 14, 19, and 26

when changing the 2nd test so that it fails , then the green "✓" on the left before line numbers 14 on this test gets a red "x" instead

Actual Behavior

only the first tests at line 13 in app.component.spec.ts (as were created by ng new angular-jest-tutorial )
will have a green "✓" on the left before line numbers 14
the other 2 have a "?"

when changing the 2nd test so that it fails , then the green "✓" on the left before line numbers 14 on the 1st test gets a red "x" but the 2nd and 3rd test still has a "?"

Edit: anything else that you think might be relevant?
in vscode - setting.json (global settings)
"jest.debugCodeLens.showWhenTestStateIn": [ "fail", "pass", "skip", "unknown" ],

[connectdotz]

ok, I was able to reproduce this issue and the problem looks like jest is reporting every test with the same "location". This makes me think it might be related to how angular produces sourcemap... You can check this from the terminal with command like this:

yarn test --testLocationInResults --json

You will see that the "location" blocks in the output are all the same. I am not familiar with angular, need your help: do you know if the test config producing the sourcemap? If the answer is yes, then we should file a bug report in facebook/jest to address the root cause.

Meanwhile, maybe we can improve the name-based fallback for this kind of situations, although it will not be perfect when the test names are dynamic.

[bodote]

don't have yarn, using jest:

$ jest --testLocationInResults --json
 PASS  src/app/app.component.spec.ts
  AppComponent
    ✓ should create the app (88 ms)
    ✓ should have as title 'angular-jest-tutorial' (52 ms)
    ✓ should render title (37 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.902 s, estimated 2 s
Ran all test suites.
{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":1,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":1,"numTotalTests":3,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1620988496866,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":{"column":39,"line":4288},"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'angular-jest-tutorial'","location":{"column":39,"line":4288},"status":"passed","title":"should have as title 'angular-jest-tutorial'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title","location":{"column":39,"line":4288},"status":"passed","title":"should render title"}],"endTime":1620988497764,"message":"","name":"/Users/bodo.teichmann/dev/learning/angular-jest-tutorial/src/app/app.component.spec.ts","startTime":1620988497127,"status":"passed","summary":""}],"wasInterrupted":false}[1234][bodo.teichmann@ba-mb-006:~/dev/learning/angular-jest-tutorial]$ 

About sourcemap: I bearly know that sourcemaps exist to map between typescript files an transpiled ".js" files. But I can not find the sourcemaps in my workspace nor can I find the transpiled ".js" files (maybe it somehow works in-memory ?). only if I call "tsc --sourceMap" directly on the command line, then the sourcemap files are created.

EDIT: the tsc output including sourcemaps: https://drive.google.com/file/d/1Pi2jfl3HQXhb2yCu-jvIwNKKdTL-UHyO/view?usp=sharing

[wrslatz]

Seeing the same issue in our Angular projects. I see one test (the first it test in the file) decorated correctly with the ✅ , otherwise they all have ❔ . Only seeing this for Angular projects, other NodeJS + TS projects working as expected.

[connectdotz]

yeah, I don't know how angular transpile ts files so also at a loss here, it could a configuration issue in the angular part, or maybe it's a bug somewhere in jest... maybe it's best to file an issue report in facebook/jest so they can tell us why all tests have the same location...

[connectdotz]

hi, we are trying a workaround for this issue while waiting for the jest fix.

The extension will fall back to "match-by-name" scheme when the locations are wrong. This should work for all plain string test names but it won't be able to find the "dynamically" named tests, such as template-string-literal or parameterized tests. For those, you could 1-1 wrap them in a string-named test describe block...

Feel free to try the .vsix file below and let us know if that helps your issue:

vscode-jest-4.0.3-rc.1.vsix.zip

[bodote]

hi, we are trying a workaround for this issue while waiting for the jest fix.

The extension will fall back to "match-by-name" scheme when the locations are wrong. This should work for all plain string test names but it won't be able to find the "dynamically" named tests, such as template-string-literal or parameterized tests. For those, you could 1-1 wrap them in a string-named test describe block...

Feel free to try the .vsix file below and let us know if that helps your issue:

vscode-jest-4.0.3-rc.1.vsix.zip

works for me, thank you

[connectdotz]

hi, we have made more changes to make the result matching more robust and fault-tolerant. Want to make sure we didn't introduce a regression, please feel free to give the version below a try when you get a chance, thx.

vscode-jest-4.0.3-rc.2.vsix.zip

[connectdotz]

@bodote thanks for attach the log. It indeed shows listTests related error:

[frontend/ListTestFileListener] failed to parse result:
...
[frontend/JestExt] (frontend) Failed to obtain test file list, something might not be setup right?

I remember this issue from your other issue #699, since it is not related to the test result matching issue, let's carry on the discussion there instead.