Merge pull request #1244 from SahilKalra98/fixRemarkToc

Updates remark-toc, remark-gfm, and rehype-autolink-headings libraries

__mocks__/rehype-autolink-headings.js

@@ -0,0 +1,13 @@
+/* Manual Mocking the rehype-autolink-headings library because our jest and typscript
+ * configuration doesn't use esm modules yet. After the package update,
+ * rehype-autolink-headings is a fully ESM module now and the reason this is being
+ * manual mocked is because it is being mocked as a CommonJS module.
+ * Here is the link: https://jestjs.io/docs/manual-mocks#mocking-node-modules
+ */
+const autolink = () => {
+  console.log('Manual Mocking of rehype-autolink-headings module')
+}
+
+module.exports = {
+  autolink
+}

__mocks__/remark-gfm.js

@@ -0,0 +1,13 @@
+/* Manual Mocking the remark-gfm library because our jest and typscript
+ * configuration doesn't use esm modules yet. After the package update,
+ * remark-gfm is a fully ESM module now and the reason this is being
+ * manual mocked is because it is being mocked as a CommonJS module.
+ * Here is the link: https://jestjs.io/docs/manual-mocks#mocking-node-modules
+ */
+const gfm = () => {
+  console.log('Manual Mocking remark-gfm module')
+}
+
+module.exports = {
+  gfm
+}

__mocks__/remark-toc.js

@@ -0,0 +1,13 @@
+/* Manual Mocking the remark-toc library because our jest and typscript
+ * configuration doesn't use esm modules yet. After the package update,
+ * remark-toc is a fully ESM module now and the reason this is being
+ * manual mocked is because it is being mocked as a CommonJS module.
+ * Here is the link: https://jestjs.io/docs/manual-mocks#mocking-node-modules
+ */
+const toc = () => {
+  console.log('Manual Mocking of remark-toc module')
+}
+
+module.exports = {
+  toc
+}

helpers/static/parseMDX.ts

@@ -1,11 +1,11 @@
 import { serialize } from 'next-mdx-remote/serialize'
 import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import matter from 'gray-matter'
+import toc from 'remark-toc'
+import gfm from 'remark-gfm'
+import autolink from 'rehype-autolink-headings'
 
-const autolink = require('rehype-autolink-headings')
 const slug = require('remark-slug')
-const toc = require('remark-toc')
-const gfm = require('remark-gfm')
 
 type ParsedMDX = {
   (fileContents: Buffer, onlyFront?: boolean): Promise<{

jest.config.ts

@@ -31,7 +31,7 @@ const config: Config.InitialOptions = {
   setupFilesAfterEnv: ['<rootDir>/jest.env.js'],
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['__tests__/utils/', 'node_modules/', '.next/'],
-  transformIgnorePatterns: ['node_modules/']
+  transformIgnorePatterns: ['node_modules/(?!(remark-toc)/)']
 }
 
 export default config

package.json

@@ -63,8 +63,8 @@
     "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
-    "rehype-autolink-headings": "^5.1.0",
     "sass": "^1.49.0",
+    "rehype-autolink-headings": "^6.1.0",
     "use-undo": "^1.0.5",
     "winston": "^3.4.0",
     "yup": "^0.32.11"
@@ -116,10 +116,10 @@
     "prettier": "^2.5.1",
     "prisma": "^2.29.1",
     "react-test-renderer": "^17.0.1",
-    "remark-gfm": "^1.0.0",
+    "remark-gfm": "^3.0.1",
     "remark-slug": "^6.1.0",
-    "remark-toc": "^7.2.0",
     "sass-loader": "^10.2.1",
+    "remark-toc": "^8.0.1",
     "svgo": "^2.8.0",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.5"