Improve frontend unit-testing experience

[kulyk]

Problem

We heavily rely on Cypress E2E tests in our quality process, probably way more than we actually should. One of the reasons people tend to write more E2E tests instead of more lightweight jest tests is because the toolchain and overall process can be confusing:

• it's hard to mock/assert HTTP requests/responses with xhr-mock, more details in Migrate away from XMLHttpRequest #17906
• we don't have a consistent way of organizing tests (e.g. a lot of tests still live in frontend/test/metabase, and we prefer to keep tests close to the source code nowadays)
• we came up with a handful of test helpers, but they're sometimes hard to find as they live in different places
• jest console is polluted with errors and warnings on most of the test runs
• there's a lot of manual work going on to prepare the test environment (e.g. setup of the expected instance settings)

Suggested Solution

We want to get to the point when every FE engineer on the team can put together a simple test using shared helpers and quickly be able to:

• mock/assert the server behavior to test out components and parts of the app talking to the server
• test their code against a variety of incoming data, especially questions (saved vs. ad-hoc, question vs model, native vs structured, etc.)
• test OSS vs. paid plan behavior

Tasks

⏳ Total ETA for this is around 1-2 weeks

Milestone 1

• Migrate to nock #27337
• Improve renderWithProviders test utility #27398
• Improve sample state fixture #27399

Milestone 2

• Add utility to set instance settings in Jest #27532
• Always use real reducers when using renderWithProviders utility #27552
• Add eslint-plugin-jest #27574
• Add jest-dom and testing-library eslint plugins #27577
• [RFC] Add mocks for sample database (database, tables, fields) #28794
• Migrate tests from using the sample database fixture to mocking apis
• Move tests from frontend/test/metabase closer to the files they cover
• Consolidate unit tests helpers (mock data builders, renderWithProviders, setupEnterpriseTest, sample dataset helpers, etc.) and make them easy to discover
• Put together a doc and/or a tutorial on how to write FE tests in Metabase

[iethree]

I don't know if this is a blocker for us for MSW, but it does not support concurrent runs in jest
mswjs/msw#474

This can be a problem when you have tests running concurrently that are trying to mock different API response payloads - you can't predict which one you will get, because it overwrites response handlers

I think Nock is not susceptible to this issue, but haven't used it, so can't comment on other possible pitfalls.

[nemanjaglumac]

Amazing job everyone involved in this massive task! 👏 🎉