Show test failure details in UI report tab

[uicowboy]

Clear and concise description of the problem

Currently when a test fails, the details of the failure are shown in the terminal, but it would be great if they were also displayed in the UI. I've tested this on a React project with TypeScript.

Suggested solution

The UI of Vitest is such a killer feature, so thank you for building this! At the moment the UI only marks the test case as failed, but the "Report" tab only renders the name of the component. Ideally, it would display the details of the test failure. Has this been considered?

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[DerYeger]

Hi, thank you for the suggestion!

I created #685 to address this issue. Does the attached screenshot meet your requirements?

[uicowboy]

Thank you @DerYeger for your speedy PR!

Yeah it looks good! Out of curiosity, the task: Task object in the collectFailed function would receive the test failure output that's also shown in the terminal when unit or even snapshot tests fail?

[DerYeger]

Thank you @DerYeger for your speedy PR!

Thanks!

Yeah it looks good! Out of curiosity, the task: Task object in the collectFailed function would receive the test failure output that's also shown in the terminal when unit or even snapshot tests fail?

I'm not sure, since I haven't worked on the terminal output.
The UI report is only for a single file. So I guess the terminal output differs by collecting the failed tasks of all files.

[uicowboy]

That makes sense, thanks for explaining. Look forward to trying this out once it's merged (unless there's another way you'd want me to test this before merging and I'll be happy to do so).

[Demivan]

There is logs property on the Task that could probably be used for this.

[uicowboy]

Looks like there's some info here that may be potentially useful:

logs?: UserConsoleLog[]

export interface UserConsoleLog {
  content: string
  type: 'stdout' | 'stderr'
  taskId?: string
  time: number
}

vitest/packages/vitest/src/types/general.ts

Line 40 in 77ba9fa

export interface UserConsoleLog {

[DerYeger]

@Demivan @uicrafts In what way should the logs be used here? There already is a logs view.

[Demivan]

I thought logs are not being displayed if test fails. If they are, then everything is fine.

[uicowboy]

I apologize if perhaps I didn't clarify things correctly when opening this issue! The original idea/suggestion that prompted me to open this thread was that when tests fail, the terminal shows the log details for that failure, but the UI doesn't. Here's an example of a snapshot test (but the same happens with unit tests):

Terminal output:

UI:

As you can see, the UI only displays the name of the failed component, but no logs/details for the test failure like we see in the terminal. @Demivan looking at the UserConsoleLog interface, would the content property contain the log failure (i.e. my first screenshot), or is it maybe just used for something else like capturing console.log calls from the user? Otherwise maybe using this interface isn't necessary and what @DerYeger did takes care of this?

[userquin]

@uicrafts can you go in that case to code tab? IIRC that error is shown in the code.

[userquin]

[uicowboy]

@userquin I thought that might be the case too initially, but it looks like the Code tab doesn't display any test failures and instead shows the source code (the whole Modal.test.tsx file), which is also pretty handy 👌

Edit: just saw the screenshot you shared, and I can confirm I'm not seeing that for failed snapshot or unit tests, at least on .tsx files.

[userquin]

@uicrafts it seems tsx or tests with snapshots not working, tested on my repro (not working). It seems that codemirror is not updating either.

EDIT: you can modify the tests on the code tab and then crtl + s or command + s to save it.

[uicowboy]

@userquin Ah, thanks for confirming on your end that it's a bug 👍

Also, that's a nice tip about being able to update the tests and save the file from the UI -- another cool feature in Vitest 👌

[DerYeger]

@uicrafts I think my PR does just that.

The logs are just your console output.

@Demivan The logs of failing tests are included.