fix: keep frontend-base out of a consuming app's jest crawl

.github/workflows/ci.yml

@@ -36,3 +36,5 @@ jobs:
       run: npm run test
     - name: Build Test Site
       run: cd test-site; npm run build
+    - name: Test Test Site
+      run: cd test-site; npm run test

README.md

@@ -28,6 +28,8 @@ Once the change matures, we recommend moving over to the pre-configured [npm wor
 
 To do so, check this repository out into the site's `packages/` directory.  Then, run `npm run dev:packages` from the site's root directory: this will watch-build any workspace check-outs and start the dev server, picking up changes automatically.  If any apps (such as `frontend-app-instructor-dashboard`) require corresponding changes, you can check them out into the `packages/` directory as siblings to `frontend-base`. See [Local development with workspaces](https://github.com/openedx/frontend-template-site#local-development-with-workspaces) for full setup details.
 
+Checkouts in `packages/` are excluded from an app's Jest crawl, so running the app's test suite there behaves the same as it does against a published `frontend-base`.
+
 ### Continuous integration
 
 In addition to running lint and the test suite, Github CI builds the included `test-site` against a packed tarball of `frontend-base`.  This verifies that the library still works end-to-end as a real dependency of a consuming site.

docs/how_tos/migrate-frontend-app.md

@@ -403,6 +403,18 @@ module.exports = createConfig('test', {
 })
 ```
 
+Note that `createConfig` merges with `webpack-merge`, so any array you pass is appended to the base config's array rather than replacing it.  To replace one, mutate the result:
+
+```js
+const config = createConfig('test', { /* ... */ });
+
+config.modulePathIgnorePatterns = ['/dist/'];
+
+module.exports = config;
+```
+
+If all of your tests live under `src/`, consider adding `roots: ['<rootDir>/src']` as well.  It narrows the crawl further, which speeds up startup.  Be careful: `roots` also filters test discovery, so any suite outside it is skipped silently.  Apps that keep tests in a `plugins/` directory or similar should list those directories too.
+
 Jest test suites that test React components that import SVG and other assets (such as PNGs) must add mocks for those filetypes.  This can be accomplished by adding module name mappers to jest.config.js.  Just make sure they come before the `@src` alias, which must also be added here if you're using it:
 
 ```js
@@ -1083,6 +1095,8 @@ Add the workspaces field to package.json
 
 This tells npm to look in ``packages/`` for local overrides of published packages.  The ``packages/`` directory is gitignored (see the `.gitignore` step above), since it contains development-only bind-mounted checkouts.
 
+``createConfig('test')`` excludes ``packages/`` from Jest's crawl for the same reason: a checkout there is a dependency, not part of your app, and Jest would otherwise register its manual mocks and collect its test suites as if they were yours.
+
 Add a turbo.site.json file
 --------------------------
 

runtime/i18n/lib.test.js

@@ -15,8 +15,6 @@ import {
 
 import { getSiteConfig, mergeSiteConfig, setSiteConfig } from '../config';
 
-jest.mock('universal-cookie');
-
 describe('lib', () => {
   const defaultSiteConfig = cloneDeep(getSiteConfig());
 

runtime/jest.config.js

@@ -3,8 +3,8 @@ module.exports = {
     '<rootDir>/setupTest.js',
   ],
   moduleNameMapper: {
-    '\\.svg$': '<rootDir>/__mocks__/svg.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir/__mocks__/file.js',
+    '\\.svg$': '<rootDir>/testMocks/svg.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/testMocks/file.js',
     '\\.(css|scss)$': require.resolve('identity-obj-proxy'),
     'site.config': '<rootDir>/site.config.test.tsx',
   },

shell/jest.config.js

@@ -3,8 +3,8 @@ module.exports = {
     './setupTest.js',
   ],
   moduleNameMapper: {
-    '\\.svg$': '<rootDir>/__mocks__/svg.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/file.js',
+    '\\.svg$': '<rootDir>/testMocks/svg.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/testMocks/file.js',
     '\\.(css|scss)$': require.resolve('identity-obj-proxy'),
     'site.config': '<rootDir>/site.config.test.tsx',
   },

test-site/babel.config.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@openedx/frontend-base/tools');
+
+module.exports = createConfig('babel');

test-site/jest.config.js

@@ -0,0 +1,11 @@
+const { createConfig } = require('@openedx/frontend-base/tools');
+
+module.exports = createConfig('test', {
+  setupFilesAfterEnv: [
+    '<rootDir>/src/setupTest.js',
+  ],
+  moduleNameMapper: {
+    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
+  },
+});