Figure out how to test for errors and warnings in the browser console and build test(s)

[jschuurk-kr]

Example currently in application: "Warning: Encountered two children with the same key, proxyCertificates. "

branch to explore solutions: 74-test-for-console-errors-and-warnings

Conclusion as implemented in linked PR: use vitest-fail-on-console.

No need to implement any tests. All vitest tests will now fail when there are console errors or warnings. Pasting non-numbers twice in the Voters and Voters page does result in an error, but improving that functionality and its tests are for issue #73.

[praseodym]

We could consider doing this in Playwright (e.g. microsoft/playwright#27277) or with Vitest (e.g. onConsoleLog).

[lkleuver]

I think this is the tooltip code that will change short term.

[jschuurk-kr]

Options with vitest:

1. onConsoleLog. Throwing an error in vite.config.ts does not fail the test, but stops the tests with an unhandled rejection. Vitest does not seem to allow importing expect into its config file.
2. A spy on console.error() and console.warn().
3. vitest-fail-on-console. It's not a lot of code and has a single dependency we already have, i.e. chalk.

[jschuurk-kr]

Option with Playwright is to define a throwOnConsole() function and call it at the start of every test. Haven't tried yet to run it in a beforeEach or to add to an override of page.

Two challenges with testing copy/paste with Playwright (because it's a good way to trigger a console error through the tooltip):

• Haven't gotten copy/paste to work on Safari. Seems not supported and only doable through a workaround.
• Running all the tests results in "Error: write EPIPE" messages.

[jschuurk-kr]

So far I'm preferring the vitest option over the Playwright one:

• easier to enable for all tests thanks to vitest-fail-on-console
• output of failing test is more readable
• higher coverage: I expect us to cover significantly more functionality with Vitest/(React)TestingLibrary than with Playwright.

[jschuurk-kr]

Playwright output - calling throwOnConsole() at the start of the test

Error: Warning: Encountered two children with the same key, %s. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.%s pollCards

followed by 34 lines of stacktrace.

Using the solution in the Playwright issue comment, where you override the test fixture, you get even more output. Or if you change expect(messages).toEqual([]); to expect(messages.length).toBe(0);, it doesn't tell you what the error was.

Vitest output - using vitest-fail-on-console:

Warning: Encountered two children with the same key, pollCards. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

followed by 18 lines of stacktrace.