diff --git a/apps/main/jest.config.ts b/apps/main/jest.config.ts
index 020e114e..996b11a9 100644
--- a/apps/main/jest.config.ts
+++ b/apps/main/jest.config.ts
@@ -2,6 +2,8 @@ import { getTsconfig } from 'get-tsconfig';
 import nextJest from 'next/jest';
 import { pathsToModuleNameMapper } from 'ts-jest';
 
+import { additionalJestPackages, commonPackages, formatTransformIgnorePatterns } from './transpilePackages';
+
 const createJestConfig = nextJest({
   dir: './',
 });
@@ -23,6 +25,7 @@ const customJestConfig = {
   },
   testEnvironment: 'jest-environment-jsdom',
   testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
+  transformIgnorePatterns: [],
   transform: {
     '\\.[jt]sx?$': [
       'ts-jest',
@@ -36,4 +39,19 @@ const customJestConfig = {
   },
 };
 
-export default createJestConfig(customJestConfig);
+// [WORKAROUND] To transpile additional dependencies we hack a bit as specified into https://github.com/vercel/next.js/discussions/31152#discussioncomment-1697047
+// (and we add our own logic to avoid hardcoding values)
+const asyncConfig = createJestConfig(customJestConfig);
+
+const defaultExport = async () => {
+  const config = await asyncConfig();
+
+  config.transformIgnorePatterns = formatTransformIgnorePatterns(
+    [...commonPackages, ...additionalJestPackages],
+    customJestConfig.transformIgnorePatterns ?? []
+  );
+
+  return config;
+};
+
+export default defaultExport;
diff --git a/apps/main/next.config.js b/apps/main/next.config.js
index 54d09969..b402f8c6 100644
--- a/apps/main/next.config.js
+++ b/apps/main/next.config.js
@@ -2,6 +2,8 @@ const cssnano = require('cssnano');
 const path = require('path');
 const tsImport = require('ts-import');
 
+const { commonPackages } = require('./transpilePackages');
+
 const tsImportLoadOptions = {
   mode: tsImport.LoadMode.Compile,
   compilerOptions: {
@@ -47,7 +49,7 @@ const moduleExports = async () => {
     typescript: {
       ignoreBuildErrors: true, // Skip since already done in a specific step of our CI/CD
     },
-    transpilePackages: ['@mediature/ui', 'pretty-bytes'],
+    transpilePackages: commonPackages,
     experimental: {
       appDir: true,
       outputFileTracingRoot: path.join(__dirname, '../../'),
diff --git a/apps/main/transpilePackages.js b/apps/main/transpilePackages.js
new file mode 100644
index 00000000..0915162a
--- /dev/null
+++ b/apps/main/transpilePackages.js
@@ -0,0 +1,22 @@
+module.exports = {
+  commonPackages: ['@mediature/ui', 'pretty-bytes'],
+  additionalJestPackages: ['@codegouvfr/react-dsfr'],
+  formatTransformIgnorePatterns(packagesToTranspile, previousPatterns) {
+    // Inspired from `next.js/packages/next/src/build/jest/jest.ts`
+
+    const transpiled = (packagesToTranspile ?? []).join('|');
+
+    return [
+      // To match Next.js behavior node_modules is not transformed, only `transpiledPackages`
+      ...(transpiled
+        ? [`/node_modules/(?!.pnpm)(?!(${transpiled})/)`, `/node_modules/.pnpm/(?!(${transpiled.replace(/\//g, '\\+')})@)`]
+        : ['/node_modules/']),
+      // CSS modules are mocked so they don't need to be transformed
+      '^.+\\.module\\.(css|sass|scss)$',
+
+      // Custom config can append to transformIgnorePatterns but not modify it
+      // This is to ensure `node_modules` and .module.css/sass/scss are always excluded
+      ...(previousPatterns || []),
+    ];
+  },
+};