Skip to content

Console tab in vitest-ui prints console.log output as html #2765

@leonadler

Description

@leonadler

Describe the bug

When displaying the "Console" tab in vitest-ui, console.log calls that contain a < are printed differently depending on how console.log was called. I'm not sure if it is intended (as in, would you sometimes want html printed from console.log as HTML in vitest-ui?) and/or fixable, but it caused some headache so I thought I'd report it.

The repro case below is basically:

console.log('A: ', /(?<char>\w)/);
console.log('B: ', /(?<char>\w)/.source);
console.log(`C: ${/(?<char>\w)/}`);

(in 3 tests, as the HTML <char> corrupts other console logs in the same test)

These 3 statements get output differently:
image

For the first case, an actual <char> element is added in vitest-ui.
image

Possibly related issue: #1279 - vitest UI doesn't log html correctly in the "console log" tab

Reproduction

import { test } from 'vitest';

const exampleRegex = /(?<char>\w)/;
//                      ^^^^^^ this gets removed in the output

test('console.log with RegExp object', () => {
  console.log('A: ', exampleRegex);
});

test('console.log with source as 2nd argument', () => {
  console.log('B: ', exampleRegex.source);
});

test('console.log with string', () => {
  console.log(`C: ${exampleRegex.source}`);
});

System Info

System:
    OS: Linux 5.15 Manjaro Linux
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 12.48 GB / 31.06 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 109.0
    Firefox: 109.0
  npmPackages:
    @vitejs/plugin-react: ^3.0.1 => 3.0.1 
    @vitest/coverage-c8: ^0.28.2 => 0.28.2 
    @vitest/ui: ^0.28.2 => 0.28.2 
    vite: ^4.0.4 => 4.0.4 
    vitest: ^0.28.2 => 0.28.2

Used Package Manager

npm

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions