Add Emotion cache to avoid errors

Add and configure an Emotion cache to turn off the "potentially unsafe"
error messages that show up even though they're not applicable.

web/gui-v2/src/components/ListView.test.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import { CacheProvider } from '@emotion/react';
 import {
   getByRole,
   getByText,
   screen,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 
-import { userEventSetup } from '../util/testing';
+import { emotionCache, userEventSetup } from '../util/testing';
 import ListView from './ListView';
 import { exportsForTestingOnly } from './ListViewTable';
 
@@ -18,7 +19,9 @@ const REMOVED_COLUMN = 'AI publications';
 describe("ListView", () => {
   it("adjust filters and reset dropdown filters", async () => {
     const { user } = userEventSetup(
-      <ListView />
+      <CacheProvider value={emotionCache}>
+        <ListView />
+      </CacheProvider>
     );
 
     // Filter by Europe and verify that the count updates
@@ -37,7 +40,9 @@ describe("ListView", () => {
 
   it("selects a group of companies", async () => {
     const { user } = userEventSetup(
-      <ListView />
+      <CacheProvider value={emotionCache}>
+        <ListView />
+      </CacheProvider>
     );
 
     const companyHeader = screen.getByRole('columnheader', { name: /company/i });
@@ -51,7 +56,9 @@ describe("ListView", () => {
   describe("add/remove columns dialog", () => {
     it("opens the dialog and changes columns", async () => {
       const { user } = userEventSetup(
-        <ListView />
+        <CacheProvider value={emotionCache}>
+          <ListView />
+        </CacheProvider>
       );
 
       for ( const column of INITIAL_COLUMNS ) {

web/gui-v2/src/util/testing.js

@@ -1,5 +1,16 @@
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import createCache from '@emotion/cache';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+// Turn off Emotion's persistant and incredibly annoying warning that `:first-child`
+// and `:nth-child` are "potentially unsafe when doing server-side rendering",
+// even though we aren't using SSR and it has no effect on this.
+// Derived from https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
+const emotionCache = createCache({
+  key: 'eto-emotion-cache',
+});
+emotionCache.compat = true;
+export { emotionCache };
 
 export function userEventSetup(jsx) {
   return {