use next/jest to simplify Jest configuration

Next.js has added a wrapper around configuring Jest to run tests. This
wrapper will do a lot of things we are already doing in our configuration.

The ones we are more paticularly interested in is the auto-mocking of
`.css` modules and its variants, as well as mocking image imports. This
means we can remove our own file mock and configuration settings. As well
as the default test paths that get ignored.

In addition, `next/jest` uses `SWC` to transform the files which is a
lot faster than Babel and is something we have already implemented in
our monorepo
iFixit/ifixit@37985f3.

Lastly, because of the default settings for Jest that `next/jest` has
we needed to manually override the `transformIgnorePatterns` to use
an empty array and thus whitelist all node_modules paths.

piglovesyou/graphql-let#610 (comment)

All the default configurations can be found here:
https://github.com/vercel/next.js/blob/canary/packages/next/build/jest/jest.ts#L101C12-L179

frontend/jest.config.js

@@ -1,11 +1,13 @@
-module.exports = {
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+   dir: './',
+});
+
+const customJestConfig = {
    moduleDirectories: ['node_modules', '<rootDir>/'],
    moduleNameMapper: {
-      // Handle CSS imports (with CSS modules)
-      '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
-      // Handle image imports
-      '\\.(gif|ttf|jpeg|eot|svg|png)$':
-         '<rootDir>/test/jest/__mocks__/fileMock.js',
       // Handle module aliases
       '@assets(.+)': '<rootDir>/assets/$1',
       '@components(.+)': '<rootDir>/components/$1',
@@ -18,10 +20,9 @@ module.exports = {
       '@public(.+)': '<rootDir>/public/$1',
    },
    setupFilesAfterEnv: ['<rootDir>/test/jest/jest-setup.ts'],
-   testPathIgnorePatterns: ['<rootDir>/(node_modules|.next|test/cypress)/'],
+   testPathIgnorePatterns: ['<rootDir>/test/cypress'],
    testEnvironment: 'jsdom',
    transform: {
-      '\\.[jt]sx?$': ['babel-jest', { presets: ['next/babel'] }],
       '.+\\.(css|style|less|sass|scss)$': 'jest-css-modules-transform',
    },
    transformIgnorePatterns: [],
@@ -30,3 +31,14 @@ module.exports = {
       'jest-watch-typeahead/testname',
    ],
 };
+
+const asyncConfig = createJestConfig(customJestConfig);
+
+module.exports = async () => {
+   const config = await asyncConfig();
+   // next/jest ignores node_modules and allows to add more ignore patterns, but we need to override them fully to whitelist some node_modules or leave as an empty array
+   // https://github.com/vercel/next.js/blob/canary/packages/next/build/jest/jest.ts
+   config.transformIgnorePatterns = customJestConfig.transformIgnorePatterns;
+
+   return config;
+};