Hone logo
Hone
Problems

Jest Coverage Maps: Visualizing Code Coverage

Code coverage is a crucial metric for assessing the quality and reliability of your software. While Jest provides basic coverage reports, visualizing coverage data as a map – highlighting which lines of code are executed and which are not – can significantly improve understanding and pinpoint areas needing more testing. This challenge asks you to implement a Jest reporter that generates a simple text-based coverage map for a given file.

Problem Description

You need to create a custom Jest reporter that, after a test run, generates a text-based "coverage map" for a specified file. This map will visually represent the lines of code in the file, using symbols to indicate whether each line was executed during the tests. The reporter should take a file path as input and produce a map where:

  • █ represents a line of code that was executed.
  • ░ represents a line of code that was not executed.

The reporter should read the file content, determine which lines were covered by the tests (using Jest's coverage data), and then construct the map. The map should be printed to the console.

Key Requirements:

  • The reporter must be a Jest reporter plugin.
  • It must accept a file path as a command-line argument (e.g., --file <path/to/file.ts>).
  • It must use Jest's coverage data to determine line coverage.
  • It must handle files that do not exist gracefully (e.g., print an error message).
  • The map should be aligned as much as possible, even with varying line lengths.

Expected Behavior:

  1. When Jest runs with the reporter and the --file argument, the reporter should read the specified file.
  2. It should access Jest's coverage data for that file.
  3. It should generate a text-based coverage map as described above.
  4. The map should be printed to the console.
  5. If the file does not exist, an error message should be printed to the console.

Edge Cases to Consider:

  • Empty files.
  • Files with very long lines.
  • Files with unusual line endings (e.g., CRLF).
  • Files that are not TypeScript or JavaScript files (though the reporter doesn't need to parse them, it needs to read them).
  • Files with comments. Comments should be treated as lines of code.

Examples

Example 1:

Input: file.ts contains:
```typescript
function add(a: number, b: number): number {
  return a + b;
}

console.log("Hello, world!");

Jest coverage data indicates that the first line was executed, and the second was not.

Output:
█  function add(a: number, b: number): number {
░  console.log("Hello, world!");

Explanation: The first line (function definition) was executed, so it's marked with █. The second line (console.log) was not executed, so it's marked with ░.

Example 2:

Input: file.ts contains:
```typescript
function multiply(a: number, b: number): number {
  return a * b;
}

function divide(a: number, b: number): number {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

Jest coverage data indicates that both lines were executed.

Output:
█  function multiply(a: number, b: number): number {
█  return a * b;
█  function divide(a: number, b: number): number {
█  if (b === 0) {
█  throw new Error("Cannot divide by zero");
█  return a / b;

Explanation: All lines were executed, so they are all marked with █.

Example 3: (Edge Case - File Not Found)

Input: Jest run with --file non_existent_file.ts
Output:
Error: File 'non_existent_file.ts' not found.

Explanation: The specified file does not exist, so an error message is printed.

Constraints

  • The reporter must be compatible with Jest versions 27 or higher.
  • The map should be reasonably readable in the console. Perfect alignment is not required, but effort should be made to align the symbols with the code.
  • The reporter should not significantly slow down the test run.
  • The reporter should be implemented in TypeScript.
  • The file path provided via --file must be a string.

Notes

  • You'll need to use the jest-runner API to create a custom reporter. Refer to the Jest documentation for details: https://jestjs.io/docs/creating-a-custom-reporter
  • Jest's coverage data is available through the testRunner.coverage property. You'll need to extract the relevant data for the specified file.
  • Consider using a library like chalk for color-coding the output (optional).
  • Focus on the core functionality of generating the coverage map. Advanced features like highlighting specific lines or providing interactive navigation are not required.
  • Error handling is important. Make sure your reporter handles invalid file paths and other potential errors gracefully.
Loading editor...
typescript