Upgrade webpack and related dependencies (#207)

* Upgrade webpack and related dependencies * Many javascript updates * USe ts-jest for transforming all javascript files * Remove babel-jest
mitodl · Oct 21, 2021 · 58bf314 · 58bf314
1 parent 541d196
commit 58bf314
Show file tree

Hide file tree

Showing 32 changed files with 563 additions and 470 deletions.
diff --git a/{{ cookiecutter.project_name }}/.eslintrc b/{{ cookiecutter.project_name }}/.eslintrc
diff --git a/{{ cookiecutter.project_name }}/.eslintrc.js b/{{ cookiecutter.project_name }}/.eslintrc.js
@@ -0,0 +1,24 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: ["eslint-config-mitodl", "plugin:@typescript-eslint/recommended"],
+  settings: {
+    react: {
+      version: "16.14.0"
+    }
+  },
+  env: {
+    browser: true,
+    jquery: true,
+    jest: true
+  },
+  rules: {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { argsIgnorePattern: "_" }
+    ]
+  }
+}
diff --git a/{{ cookiecutter.project_name }}/Dockerfile-node b/{{ cookiecutter.project_name }}/Dockerfile-node
@@ -1,4 +1,4 @@
-FROM node:12.16.1
+FROM node:16.11.0
 LABEL maintainer "ODL DevOps <[email protected]>"
 
 RUN apt-get update && apt-get install libelf1

diff --git a/{{ cookiecutter.project_name }}/README.md b/{{ cookiecutter.project_name }}/README.md
@@ -16,41 +16,80 @@ Run through those steps **including the addition of `/etc/hosts` aliases and the
 Described below are some setup steps that are not strictly necessary
 for running the app
 
-### Running tests
-
-#### NOTE: These commands can be run with ```docker-compose exec``` to execute them in an already-running container, or with ```docker-compose run --rm``` to execute them in a new container.
-
-    ### PYTHON TESTS/LINTING
-    # Run Python tests
-    docker-compose run --rm web pytest
-    # Run Python tests in a single file
-    docker-compose run --rm web pytest /path/to/test.py
-    # Run Python test cases in a single file that match some function/class name
-    docker-compose run --rm web pytest /path/to/test.py -k test_some_logic
-    # Run Python linter
-    docker-compose run --rm web pylint
-
-    ### PYTHON FORMATTING
-    # Format all python files
-    docker-compose run --rm web black .
-    # Format a specific file
-    docker-compose run --rm web black /path/to/file.py
-
-    ### JS/CSS TESTS/LINTING
-    # We also include a helper script to execute JS tests in most of our projects 
-    docker-compose run --rm watch ./scripts/test/js_test.sh
-    # Run JS tests in specific file
-    docker-compose run --rm watch ./scripts/test/js_test.sh path/to/file.js
-    # Run JS tests in specific file with a description that matches some text
-    docker-compose run --rm watch ./scripts/test/js_test.sh path/to/file.js "should test basic arithmetic"
-    # Run the JS linter
-    docker-compose run --rm watch npm run lint
-    # Run SCSS linter
-    docker-compose run --rm watch npm run scss_lint
-
-    ### JS FORMATTING
-    # Run prettier-eslint, fixes style issues that may be causing the build to fail
-    docker-compose run --rm watch npm run fmt
+# Testing and Formatting
+
+Writing tests, running the test suite, and formatting code follows the same steps that are outlined in [the common ODL web app guide](https://github.com/mitodl/handbook/blob/master/common-web-app-guide.md#testing-and-formatting).
+Below are some steps that may be particular to this project.
+
+## JS/CSS Tests and Linting
+
+The JS linting, testing, and formatting tools can be used either in the `watch`
+(node.js) container or on the host computer from the command line.
+
+To run these things in the docker container, preface the commands below with
+`docker-compose run --rm watch`.
+
+### JS tests
+
+We use [Jest](https://jestjs.io/) for our JavaScript tests. It's a nice batteries-included
+testing framework built for testing React components from the ground up.
+
+To run the tests:
+
+```sh
+npm test
+```
+
+For watch mode (`jest --watch`):
+
+```sh
+npm run test:watch
+```
+
+To run a specific test by name:
+
+```sh
+npm test -- -t "my test name"
+```
+
+(note that this will find partial matches too).
+
+To generate a coverage report:
+
+```sh
+npm run test:coverage
+```
+
+### JS formatting, linting, and typechecking
+
+We're using TypeScript for typechecking, eslint for linting, and prettier for
+opinionated code formatting. Just as with the tests above, these commands can
+all be run ether in the docker container or the host machine.
+
+To run the typechecker:
+
+```sh
+npm run typecheck
+```
+
+This runs `tsc --noEmit`, which basically typechecks the program and outputs
+any error but does not run a full compilation. We have incremental compilation
+turned on, so this should be relatively fast. It uses a file called
+`.tsbuildinfo` for incremental compilation.
+
+To run the linter:
+
+```sh
+npm run lint
+```
+
+And to format, try:
+
+```sh
+npm run fmt
+```
+
+You can also try `npm run fmt:check` to see if any files need to be reformatted.
 
 
 ### Running the app in a notebook

diff --git a/{{ cookiecutter.project_name }}/docker-compose.yml b/{{ cookiecutter.project_name }}/docker-compose.yml
@@ -35,7 +35,7 @@ services:
     networks:
       default:
         aliases:
-          # this ensures that containers route this hostname back to the web app
+          # this ensures that pages route this hostname back to the web app
           - "xpro.odl.local"
   web:
     build:

diff --git a/{{ cookiecutter.project_name }}/jest.config.js b/{{ cookiecutter.project_name }}/jest.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+  setupFilesAfterEnv: [
+    // see https://github.com/ricardo-ch/jest-fail-on-console/issues/4
+    '@testing-library/react-hooks/disable-error-filtering.js',
+    "<rootDir>static/js/test_setup.ts"
+  ],
+  cacheDirectory: ".jest-cache",
+  transform: {
+    "^.+\\.[tj]sx?$": "ts-jest"
+  },
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/static/js/mocks/fileMock.js",
+    "\\.(css|less)$": "<rootDir>/static/js/mocks/styleMock.js"
+  },
+  testPathIgnorePatterns: ["<rootDir>/staticfiles/", "<rootDir>/node_modules/"],
+  testEnvironment: "jsdom"
+}
diff --git a/{{ cookiecutter.project_name }}/package.json b/{{ cookiecutter.project_name }}/package.json
@@ -7,90 +7,95 @@
     "url": "{{ cookiecutter.repository }}.git"
   },
   "dependencies": {
-    "autoprefixer": "^9.8.6",
-    "@babel/core": "^7.11.1",
-    "@babel/eslint-parser": "^7.11.3",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-transform-react-constant-elements": "^7.10.1",
-    "@babel/plugin-transform-react-inline-elements": "^7.10.1",
-    "@babel/plugin-transform-react-jsx": "^7.10.3",
-    "@babel/plugin-transform-runtime": "^7.10.3",
-    "@babel/polyfill": "^7.10.4",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/register": "^7.10.5",
-    "@sentry/browser": "^5.20.1",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
-    "chai": "^4.2.0",
-    "codecov": "^3.7.2",
-    "css-loader": "^4.2.1",
+    "@babel/core": "^7.15.8",
+    "@babel/eslint-parser": "^7.15.8",
+    "@sentry/browser": "^6.13.3",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/enzyme": "^3.10.9",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/history": "^4.7.9",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.28",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-redux": "^7.1.19",
+    "@types/react-router": "^5.1.17",
+    "@types/react-router-dom": "^5.3.1",
+    "@types/redux-logger": "^3.0.9",
+    "@types/sinon": "^10.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "autoprefixer": "^10.3.7",
+    "core-js": "^3.18.2",
+    "css-loader": "^6.4.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.3",
-    "eslint": "^7.6.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "eslint": "^7.32.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-flow-vars": "^0.5.0",
-    "eslint-plugin-mocha": "^8.0.0",
-    "eslint-config-mitodl": "^0.0.7",
-    "eslint-plugin-react": "^7.20.5",
+    "eslint-config-mitodl": "^0.2.1",
+    "eslint-plugin-mocha": "^9.0.0",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "express": "^4.17.1",
-    "fetch-mock": "^9.10.6",
-    "history": "^5.0.0",
-    "isomorphic-fetch": "^2.2.1",
+    "history": "^5.0.1",
+    "jest": "^27.2.1",
+    "jest-fail-on-console": "^2.0.4",
+    "js-beautify": "^1.14.0",
     "jsdom": "^16.4.0",
-    "lodash": "^4.17.19",
-    "mini-css-extract-plugin": "^0.10.0",
-    "mocha": "^8.1.1",
-    "node-sass": "^4.14.1",
-    "nyc": "^15.1.0",
+    "mini-css-extract-plugin": "^2.4.2",
     "object.entries": "^1.1.2",
-    "postcss-loader": "^3.0.0",
-    "prettier-eslint-cli": "^5.0.0",
+    "postcss-loader": "^6.1.1",
+    "prettier-eslint-cli": "^5.0.1",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "ramda": "^0.27.1",
-    "react": "^16.13.1",
-    "react-addons-shallow-compare": "^15.6.2",
-    "react-dom": "^16.13.1",
-    "react-ga": "^3.1.2",
-    "react-hot-loader": "^4.12.21",
-    "react-redux": "^7.2.1",
-    "react-router": "^4.1.1",
-    "react-router-dom": "^5.2.0",
-    "react-test-renderer": "^16.13.1",
-    "redux": "^4.0.5",
+    "react": "^17.0.2",
+    "react-addons-shallow-compare": "^15.6.3",
+    "react-dom": "^17.0.2",
+    "react-hot-loader": "^4.13.0",
+    "react-redux": "^7.2.5",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.3.0",
+    "react-test-renderer": "^17.0.2",
+    "redux": "^4.1.1",
     "redux-actions": "^2.6.5",
     "redux-logger": "^3.0.6",
     "redux-query": "^3.4.2",
     "redux-query-interface-superagent": "^3.4.2",
     "redux-query-react": "^3.4.2",
+    "sass": "^1.42.1",
     "sass-lint": "^1.13.1",
-    "sass-loader": "^9.0.3",
-    "sinon": "^9.0.2",
-    "style-loader": "^1.2.1",
-    "url-loader": "^4.1.0",
-    "webpack": "^4.44.1",
-    "webpack-bundle-tracker": "^0.4.3",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-middleware": "^3.7.2",
+    "sass-loader": "^12.2.0",
+    "sinon": "^11.1.2",
+    "style-loader": "^3.3.0",
+    "ts-loader": "^9.2.6",
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.4.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.55.1",
+    "webpack-bundle-tracker": "^1.4.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-middleware": "^5.2.1",
     "webpack-hot-middleware": "^2.25.0"
   },
   "engines": {
-    "node": "12.16.1",
-    "yarn": "1.22.0"
+    "node": "16.11.0",
+    "yarn": "1.22.15"
   },
   "scripts": {
-    "lint": "node ./node_modules/eslint/bin/eslint.js ./static/js",
+    "lint": "eslint static/js --ext .js,.jsx,.ts,.tsx",
+    "lint:cache": "eslint static/js --ext .js,.jsx,.ts,.tsx --cache",
     "scss_lint": "node ./node_modules/sass-lint/bin/sass-lint.js --verbose --no-exit",
-    "test": "./scripts/test/js_test.sh",
-    "coverage": "COVERAGE=1 ./scripts/test/js_test.sh",
-    "codecov": "CODECOV=1 ./scripts/test/js_test.sh",
-    "watch": "WATCH=1 ./scripts/test/js_test.sh",
-    "repl": "node --require ./scripts/repl.js",
-    "fmt": "LOG_LEVEL= prettier-eslint --write --no-semi --ignore 'static/js/flow/**/*.js' $PWD/'static/js/**/*.js'",
-    "fmt:check": "LOG_LEVEL= prettier-eslint --list-different --no-semi --ignore 'static/js/flow/**/*.js' $PWD/'static/js/**/*.js'"
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "fmt": "LOG_LEVEL= prettier-eslint --write --no-semi --ignore $PWD/'static/js/types/*.d.ts' $PWD/'static/js/**/*.ts' $PWD/'static/js/**/*.tsx' $PWD/'static/scss/**/*.scss'",
+    "fmt:check": "LOG_LEVEL= prettier-eslint --list-different --no-semi --ignore $PWD/'static/js/types/*.d.ts' $PWD/'static/js/**/*.ts' $PWD/'static/js/**/*.tsx' $PWD/'static/scss/**/*.scss'",
+    "typescript": "rm -rf dist && rm -f .tsbuildinfo && tsc",
+    "typecheck": "tsc",
+    "typecheck:watch": "tsc --noEmit --watch",
+    "build": "webpack --config webpack.config.prod.js --bail"
   },
-  "browserslist": ["> 1%"]
+  "browserslist": [
+    "> 1%"
+  ]
 }