[Bug]: HTML Coverage does not understand template strings

[hasezoey]

Version

27.1.1

Steps to reproduce

1. clone https://github.com/hasezoey/jest-template-string-repro
2. cd into the repository
3. run yarn install
4. run yarn run test
5. open coverage/lcov-report/some_source.js.html in a browser (in my case it was firefox)

Expected behavior

To handle and show Template strings properly

Actual behavior

Template Strings are not recognized and syntax highlighting can go haywire (see complex repository / original problem repository)

Additional context

The original Project where i noticed this problem, is https://github.com/typegoose/typegoose/, in particular it is the errors.ts file

Steps for this complex repository:

1. clone the mentioned repository
2. cd into the repository
3. run yarn install
4. run yarn run test:coverage
5. open coverage/lcov-report/src/internal/errors.ts.html in a browser (in my case firefox)
6. look at the syntax highlighting going haywire (and also showing wrong values on the wrong lines?)

Environment

$ yarn envinfo --preset jest 
yarn run v1.22.11
$ /home/hasezoey/Downloads/jest-test/node_modules/.bin/envinfo --preset jest

  System:
    OS: Linux 5.14 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 16.8.0 - /tmp/yarn--1631453447308-0.8985475973800452/node
    Yarn: 1.22.11 - /tmp/yarn--1631453447308-0.8985475973800452/yarn
  npmPackages:
    jest: ^27.1.1 => 27.1.1 

Done in 0.18s.

[hasezoey]

updated reproduction repository to jest 28, where it still happens (added more example cases)

to clarify, it seems like somehow the template string is not seen as a string and applies colors based on keywords (like undefined is a different color from and, even though it is not in ${})

[github-actions[bot]]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[hasezoey]

updated reproduction repository to jest 29(.5.0), where the same result can still be observed

example screenshot, i would expect the template string to be the same color before and after the ${} and to not highlight undefined / null while not being in a ${} and also not change the color if a normal string is inside the template string:

[github-actions[bot]]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[hasezoey]

still a issue with jest 29.7.0.

also updated the reproduction repository to that version.

EDIT: also just tried jest 30.0.0-alpha.4, same issue

[github-actions[bot]]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[hasezoey]

This issue is stale because it has been open for 1 year with no activity

Well, for over 1 and (about) a half year, there has not been a new release of jest, and 29.7.0 is still the latest.

Though i also now tested it with 30.0.0-beta.4, where it still is a issue.