fix: straightening out jest config, requiring mocks

This commit changes how we manage jest configs to some extent, and puts a bit more responsibility on the apps consuming our common jest config here in frontend-base.  See the README for more details, but there was no good way to provide mock JS files for SVG and files in the repo here now that we’re using ts-jest instead of babel.

README.md

@@ -102,5 +102,40 @@ Find any other imports/usages of `frontend-build` in your repository and replace
 
 Currently this section is a quick of notes documenting required changes to MFEs.  We will turn this into a more rigorous migration guide in the future.
 
-- First follow the steps above in the "Development" section.
-- Description fields are now required on all i18n messages in the repository.  This is because of a change to the ESLint config.
+### Follow "Development" section.
+
+First follow the steps above in the "Development" section.
+
+### i18n Descriptions
+
+Description fields are now required on all i18n messages in the repository.  This is because of a change to the ESLint config.
+
+### Jest Mocks
+
+Jest test suites that test React components that import SVG and files must add mocks for those filetypes.  This can be accomplished by adding the following module name mappers to jest.config.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',
+},
+```
+
+Then, create a `src/__mocks__` folder and add the necessary mocks.
+
+**svg.js:**
+
+```
+export default 'SvgrURL';
+export const ReactComponent = 'SvgMock';
+```
+
+**file.js:**
+
+```
+module.exports = 'FileMock';
+```
+
+You can change the values of "SvgrURL", "SvgMock", and "FileMock" if you want to reduce changes necessary to your snapshot tests; the old values from frontend-build assume svg is only being used for icons, so the values referenced an "icon" which felt unnecessarily narrow.
+
+This is necessary because we cannot write a tsconfig.json in MFEs that includes transpilation of the "config/jest" folder in frontend-base, it can't meaningfully find those files and transpile them, and we wouldn't want all MFEs to have to include such idiosyncratic configuration anyway.  The SVG mock, however, requires ESModules syntax to export its default and ReactComponent exports at the same time.  This means without moving the mocks into the MFE code, the SVG one breaks transpilation and doesn't understand the `export` syntax used.  By moving them into the MFE, they can be easily transpiled along with all the other code when jest tries to run.

cli/test-app/jest.config.js

@@ -0,0 +1,8 @@
+const { createConfig } = require('@openedx/frontend-base');
+
+module.exports = createConfig('jest', {
+  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',
+  },
+});

cli/test-app/src/__mocks__/file.js

@@ -0,0 +1 @@
+module.exports = 'FileMock';

cli/test-app/src/__mocks__/svg.js

@@ -0,0 +1,2 @@
+export default 'SvgURL';
+export const ReactComponent = 'SvgMock';

cli/test-app/src/__snapshots__/App.test.jsx.snap

@@ -32,7 +32,7 @@ exports[`Basic test should render 1`] = `
   <h2>
     JSX parsing tests
   </h2>
-  <IconMock
+  <SvgMock
     style={
       {
         "width": "10rem",
@@ -44,7 +44,7 @@ exports[`Basic test should render 1`] = `
   </h2>
   <img
     alt="appleFromTsx"
-    src="icon/mock/path"
+    src="SvgURL"
     style={
       {
         "width": "10rem",
@@ -56,7 +56,7 @@ exports[`Basic test should render 1`] = `
   </h2>
   <img
     alt="apple"
-    src="icon/mock/path"
+    src="SvgURL"
     style={
       {
         "width": "10rem",
@@ -65,7 +65,7 @@ exports[`Basic test should render 1`] = `
   />
   <img
     alt="apple"
-    src="icon/mock/path"
+    src="SvgURL"
     style={
       {
         "width": "10rem",
@@ -75,7 +75,7 @@ exports[`Basic test should render 1`] = `
   <br />
   <img
     alt="apple"
-    src="test-file-stub"
+    src="FileMock"
     style={
       {
         "width": "10rem",

config/jest.config.js

@@ -20,19 +20,17 @@ module.exports = {
   ],
   rootDir: process.cwd(),
   moduleNameMapper: {
-    '\\.svg': path.resolve(__dirname, 'jest/svgrMock.js'),
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': path.resolve(__dirname, 'jest/fileMock.js'),
     '\\.(css|scss)$': 'identity-obj-proxy',
     'env.config': envConfigPath,
   },
   collectCoverageFrom: [
-    'src/**/*.{js,jsx}',
+    'src/**/*.{js,jsx,ts,tsx}',
   ],
   coveragePathIgnorePatterns: [
     '/node_modules/',
     'setupTest.js',
   ],
   transformIgnorePatterns: [
-    '/node_modules/(?!@(open)?edx)',
+    'node_modules/(?!@(open)?edx)',
   ],
 };

jest.config.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('.');
+
+module.exports = createConfig('jest');

lib/plugins/jest.config.js

@@ -0,0 +1,8 @@
+const { createConfig } = require('../..');
+
+module.exports = createConfig('jest', {
+  // This testEnvironment is important - our default Jest configuration sets the testEnvironment to
+  // 'jsdom' - this does not work for tests that rely on node features, such as those for
+  // HtmlWebpackNewRelicPlugin.
+  testEnvironment: 'node',
+});