build(ci): Split frontend tests into 2 instances (#25359)

Frontend test duration has been creeping up and failing. There are some optimizations we could do, but I think this needs to be split for now.

Took the logic from this post jestjs/jest#6270 (comment) and applied it here.

.github/workflows/acceptance.yml

@@ -18,6 +18,9 @@ jobs:
     name: frontend tests
     runs-on: ubuntu-20.04
     timeout-minutes: 20
+    strategy:
+      matrix:
+        instance: [0, 1]
 
     env:
       VISUAL_HTML_ENABLE: 1
@@ -48,10 +51,12 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
+      - name: Build CSS
+        run: NODE_ENV=production yarn build-css
+
       - name: jest
         run: |
-          NODE_ENV=production yarn build-css
-          yarn test-ci --forceExit
+          CI_NODE_TOTAL=${{ strategy.job-total }} CI_NODE_INDEX=${{ matrix.instance }} JEST_TESTS=$(yarn -s jest --listTests --json) yarn test-ci --forceExit
 
       - name: Save HTML artifacts
         uses: actions/upload-artifact@v2

jest.config.js

@@ -1,6 +1,35 @@
 /*eslint-env node*/
 const path = require('path'); // eslint-disable-line
 
+let testMatch;
+
+const {JEST_TESTS, CI_NODE_TOTAL, CI_NODE_INDEX} = process.env;
+/**
+ * In CI we may need to shard our jest tests so that we can parellize the test runs
+ *
+ * `JEST_TESTS` is a list of all tests that will run, captured by `jest --listTests`
+ * Then we split up the tests based on the total number of CI instances that will
+ * be running the tests.
+ */
+if (
+  JEST_TESTS &&
+  typeof CI_NODE_TOTAL !== 'undefined' &&
+  typeof CI_NODE_INDEX !== 'undefined'
+) {
+  // Taken from https://github.com/facebook/jest/issues/6270#issue-326653779
+  const tests = JSON.parse(process.env.JEST_TESTS).sort((a, b) => {
+    return b.localeCompare(a);
+  });
+
+  const length = tests.length;
+  const size = Math.floor(length / CI_NODE_TOTAL);
+  const remainder = length % CI_NODE_TOTAL;
+  const offset = Math.min(CI_NODE_INDEX, remainder) + CI_NODE_INDEX * size;
+  const chunk = size + (CI_NODE_INDEX < remainder ? 1 : 0);
+
+  testMatch = tests.slice(offset, offset + chunk);
+}
+
 module.exports = {
   verbose: false,
   collectCoverageFrom: [
@@ -25,7 +54,7 @@ module.exports = {
     'jest-canvas-mock',
   ],
   setupFilesAfterEnv: ['<rootDir>/tests/js/setupFramework.ts'],
-  testMatch: ['<rootDir>/tests/js/**/*(*.)@(spec|test).(js|ts)?(x)'],
+  testMatch: testMatch || ['<rootDir>/tests/js/**/*(*.)@(spec|test).(js|ts)?(x)'],
   testPathIgnorePatterns: ['<rootDir>/tests/sentry/lang/javascript/'],
 
   unmockedModulePathPatterns: [