Fix a whole bunch of frontend test issues

[nickclyde]

Related Issue or Background Info

• We are often having to rerun our frontend tests in CI 3-4 times to get them to pass.
• The test output is also very verbose, lots of unuseful and noisy warnings come out

Changes Proposed

(Here is a link to view changes with whitespace and deleted files filtered out)

• Added eslint-plugin-testing-library to our eslint config (ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library)
  • Fix the ~400ish errors and warnings from that plugin. Most of these have to do with the way we've been using waitFor and act in our tests. The plugin suggests to never use act in your tests because Testing Library's methods actually have act built in, and the warning appearing in your tests actually means that there was a side effect in your test that was not explicitly anticipated by your expectations. A lot of times this can be resolved by using waitForElementToBeRemoved to explicitly wait for a loading screen to pass, or for a button to be re-enabled, for example. More info here: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#wrapping-things-in-act-unnecessarily
• Added eslint-plugin-unused-imports to enable automatically removing unused imports when eslint --fix is ran, meaning no more lint commits of shame!
  • Also removed some unused vars from throughout the codebase
• Added eslint-plugin-jest-dom which catches a few more common hangups in tests that use jest-dom
• Remove unnecessary calls to cleanup in tests
• Converted all tests still using react-test-renderer to use testing-library instead
• Converted some snapshot tests into tests with actual expectations (some snapshot tests still remain)
• Managed to get rid of all console errors and warnings during test runs
  • Suppressing the deprecation warnings from moment
  • Suppress a random DOMException from QueueItem.test.tsx
• Bump the global Jest timeout to 30s. This ended up being what was causing our CI runs to fail, as explained by this StackOverflow comment

Screenshots / Demos

Checklist for Author and Reviewer

UI

• Any changes to the UI/UX are approved by design
• Any new or updated content (e.g. error messages) are approved by design

Testing

• Includes a summary of what a code reviewer should verify

Changes are Backwards Compatible

• Database changes are submitted as a separate PR
  • Any new tables that do not contain PII are accompanied by a GRANT SELECT to the no-PHI user
  • Any changes to tables that have custom no-PHI views are accompanied by changes to those views
    (including re-granting permission to the no-PHI user if need be)
  • Liquibase rollback has been tested locally using ./gradlew liquibaseRollbackSQL or liquibaseRollback
  • Each new changeset has a corresponding tag
• GraphQL schema changes are backward compatible with older version of the front-end

Security

• Changes with security implications have been approved by a security engineer (changes to authentication, encryption, handling of PII, etc.)
• Any dependencies introduced have been vetted and discussed

Cloud

• DevOps team has been notified if PR requires ops support
• If there are changes that cannot be tested locally, this has been deployed to our Azure test, dev, or pentest environment for verification

[nickclyde]

Just added these for use in tests

[nickclyde]

this ensures unique key props to suppress console error

[nathancrtr]

Ooh, does this mean I can prefix unused variables with an underscore and the linter won't yell at me for it? 😁

[nickclyde]

Yes!! 🎉

[nathancrtr]

The patterns introduced here result in faster, less-fragile runs with no console output spam. This is a big win! 🎉 🚀

[emmastephenson]

LGTM, thank you so much for all your hard work on this one Nick!!

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

100.0% Coverage
0.0% Duplication

[zdeveloper]

LGTM! thank you for the hard work that went into this