Upstream provides a system for creating frontend tests using Mocha. In Brave, we tend to use Jest for writing frontend tests. We introduced Jest before upstream had a good story for writing WebUI tests.
However, due to the different approaches taken both tests fit into a different
niche. Upstream's approach is good for writing full end-to-end tests and can be
thought of as similar to a browser_test (in fact, they use a lot of the
browser_test machinery). Our Jest tests are conceptually much more similar to
unit_tests and we make extensive use of mocking to test small pieces of
functionality.
These were introduced in Brave before there was a good story for testing WebUIs upstream. They are primarily used with our React pages, but there's no reason they can't be used to unit test Lit/Polymer functionality.
Adding one of these tests is simple: Create a <your-file>.test.ts file next to
the file you want to test.
// <your-file>.test.ts
import { add } from './your-file'
describe('your file should work the way I want', () => {
it('should be able to add things', () => {
expect(add(1, 2)).toBe(3)
})
})You can run all tests with pnpm run test-unit or filter to a specific test
with pnpm run test-unit -t "should be able to add". The tests run quite
quickly and you can run them in watch mode to automatically run tests affected
by a change with pnpm run test-unit --watch.
We use Testing Library for writing React unit tests. It can render React trees to a Jest DOM, allowing you to take snapshots and to check that things are rendering as expected.
Historically we haven't written these, though it would be good to start. It's likely that these test suites are going to be somewhat coupled to Lit/Polymer UIs and we may need some integration work to get them working with our React UIs. That said, if you're working on an upstream UI, or a Lit based page these are probably a good choice.
See the below link for Upstream's documentation https://chromium.googlesource.com/chromium/src/+/main/docs/webui/testing_webui.md