Add tests on React 17

package.json

@@ -39,10 +39,10 @@
   "dependencies": {
     "@types/mdast": "^3.0.3",
     "@types/unist": "^2.0.3",
-    "html-to-react": "^1.3.4",
+    "html-to-react": "^1.4.5",
     "mdast-add-list-metadata": "1.0.1",
     "prop-types": "^15.7.2",
-    "react-is": "^16.8.6",
+    "react-is": "^17.0.0",
     "remark-parse": "^9.0.0",
     "unified": "^9.0.0",
     "unist-util-visit": "^2.0.0",
@@ -57,11 +57,13 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@matejmazur/react-katex": "^3.0.0",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.0.0",
+    "@testing-library/react": "^11.0.0",
     "@types/react": "^16.0.0",
     "@types/react-dom": "^16.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -71,12 +73,12 @@
     "eslint-config-sanity": "^4.0.0",
     "eslint-plugin-react": "^7.0.0",
     "jest": "^26.0.0",
+    "katex": "^0.12.0",
     "npm-run-all": "^4.0.0",
     "prettier": "^2.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-katex": "^2.0.0",
-    "react-test-renderer": "^16.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-test-renderer": "^17.0.0",
     "remark-cli": "^9.0.0",
     "remark-gfm": "^1.0.0",
     "remark-math": "^4.0.0",

readme.md

@@ -281,19 +281,19 @@ render(<ReactMarkdown renderers={renderers} children={markdown} />, document.bod
 
 This example shows how a syntax extension is used to support math in markdown
 that adds new node types ([`remark-math`][math]), which are then handled by
-renderers to use [`react-katex`][react-katex]:
+renderers to use [`@matejmazur/react-katex`][react-katex]:
 
 ```jsx
 import React from 'react'
 import ReactMarkdown from 'react-markdown'
-import {InlineMath, BlockMath} from 'react-katex'
+import Tex from '@matejmazur/react-katex'
 import {render} from 'react-dom'
 import math from 'remark-math'
 import 'katex/dist/katex.min.css' // `react-katex` does not import the CSS for you
 
 const renderers = {
-  inlineMath: ({value}) => <InlineMath math={value} />,
-  math: ({value}) => <BlockMath math={value} />
+  inlineMath: ({value}) => <Tex math={value} />,
+  math: ({value}) => <Tex block math={value} />
 }
 
 render(
@@ -494,7 +494,7 @@ abide by its terms.
 
 [security]: #security
 
-[react-katex]: https://github.com/talyssonoc/react-katex
+[react-katex]: https://github.com/MatejBransky/react-katex
 
 [react-syntax-highlighter]: https://github.com/react-syntax-highlighter/react-syntax-highlighter
 

test/__snapshots__/react-markdown.test.js.snap

@@ -1007,36 +1007,7 @@ exports[`can use parser plugins 1`] = `
 </p>
 `;
 
-exports[`passes along all props when the node type is unknown 1`] = `
-Array [
-  <p>
-    Lift(
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mi>L</mi></mrow><annotation encoding=\\"application/x-tex\\">L</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"strut\\" style=\\"height:0.68333em;\\"></span><span class=\\"strut bottom\\" style=\\"height:0.68333em;vertical-align:0em;\\"></span><span class=\\"base\\"><span class=\\"mord mathit\\">L</span></span></span></span>",
-        }
-      }
-    />
-    ) can be determined by Lift Coefficient (
-    <span
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding=\\"application/x-tex\\">C_L</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"strut\\" style=\\"height:0.68333em;\\"></span><span class=\\"strut bottom\\" style=\\"height:0.83333em;vertical-align:-0.15em;\\"></span><span class=\\"base\\"><span class=\\"mord\\"><span class=\\"mord mathit\\" style=\\"margin-right:0.07153em;\\">C</span><span class=\\"msupsub\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.32833099999999993em;\\"><span style=\\"top:-2.5500000000000003em;margin-left:-0.07153em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathit mtight\\">L</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.15em;\\"></span></span></span></span></span></span></span></span>",
-        }
-      }
-    />
-    ) like the following equation.
-  </p>,
-  <div
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mi>L</mi><mo>=</mo><mfrac><mrow><mn>1</mn></mrow><mrow><mn>2</mn></mrow></mfrac><mi>ρ</mi><msup><mi>v</mi><mn>2</mn></msup><mi>S</mi><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding=\\"application/x-tex\\">L = \\\\frac{1}{2} \\\\rho v^2 S C_L</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"strut\\" style=\\"height:1.32144em;\\"></span><span class=\\"strut bottom\\" style=\\"height:2.00744em;vertical-align:-0.686em;\\"></span><span class=\\"base\\"><span class=\\"mord mathit\\">L</span><span class=\\"mord rule\\" style=\\"margin-right:0.2777777777777778em;\\"></span><span class=\\"mrel\\">=</span><span class=\\"mord rule\\" style=\\"margin-right:0.2777777777777778em;\\"></span><span class=\\"mord\\"><span class=\\"mopen nulldelimiter\\"></span><span class=\\"mfrac\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:1.32144em;\\"><span style=\\"top:-2.314em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">2</span></span></span><span style=\\"top:-3.15em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"stretchy\\" style=\\"height:0.2em;\\"><svg width='400em' height='0.2em' viewBox='0 0 400000 200' preserveAspectRatio='xMinYMin slice'><path d='M0 80H400000 v40H0z M0 80H400000 v40H0z'/></svg></span></span><span style=\\"top:-3.677em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.686em;\\"></span></span></span></span><span class=\\"mclose nulldelimiter\\"></span></span><span class=\\"mord mathit\\">ρ</span><span class=\\"mord\\"><span class=\\"mord mathit\\" style=\\"margin-right:0.03588em;\\">v</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8641079999999999em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\">2</span></span></span></span></span></span></span></span><span class=\\"mord mathit\\" style=\\"margin-right:0.05764em;\\">S</span><span class=\\"mord\\"><span class=\\"mord mathit\\" style=\\"margin-right:0.07153em;\\">C</span><span class=\\"msupsub\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.32833099999999993em;\\"><span style=\\"top:-2.5500000000000003em;margin-left:-0.07153em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathit mtight\\">L</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.15em;\\"></span></span></span></span></span></span></span></span></span>",
-      }
-    }
-  />,
-]
-`;
+exports[`passes along all props when the node type is unknown 1`] = `"<p>Lift(<span><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math xmlns=\\"http://www.w3.org/1998/Math/MathML\\"><semantics><mrow><mi>L</mi></mrow><annotation encoding=\\"application/x-tex\\">L</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.68333em;vertical-align:0em;\\"></span><span class=\\"mord mathnormal\\">L</span></span></span></span></span>) can be determined by Lift Coefficient (<span><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math xmlns=\\"http://www.w3.org/1998/Math/MathML\\"><semantics><mrow><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding=\\"application/x-tex\\">C_L</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.83333em;vertical-align:-0.15em;\\"></span><span class=\\"mord\\"><span class=\\"mord mathnormal\\" style=\\"margin-right:0.07153em;\\">C</span><span class=\\"msupsub\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.32833099999999993em;\\"><span style=\\"top:-2.5500000000000003em;margin-left:-0.07153em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathnormal mtight\\">L</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.15em;\\"><span></span></span></span></span></span></span></span></span></span></span>) like the following equation.</p><div><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math xmlns=\\"http://www.w3.org/1998/Math/MathML\\" display=\\"block\\"><semantics><mrow><mi>L</mi><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mi>ρ</mi><msup><mi>v</mi><mn>2</mn></msup><mi>S</mi><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding=\\"application/x-tex\\">L = \\\\frac{1}{2} \\\\rho v^2 S C_L</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.68333em;vertical-align:0em;\\"></span><span class=\\"mord mathnormal\\">L</span><span class=\\"mspace\\" style=\\"margin-right:0.2777777777777778em;\\"></span><span class=\\"mrel\\">=</span><span class=\\"mspace\\" style=\\"margin-right:0.2777777777777778em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:2.00744em;vertical-align:-0.686em;\\"></span><span class=\\"mord\\"><span class=\\"mopen nulldelimiter\\"></span><span class=\\"mfrac\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:1.32144em;\\"><span style=\\"top:-2.314em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">2</span></span></span><span style=\\"top:-3.23em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"frac-line\\" style=\\"border-bottom-width:0.04em;\\"></span></span><span style=\\"top:-3.677em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.686em;\\"><span></span></span></span></span></span><span class=\\"mclose nulldelimiter\\"></span></span><span class=\\"mord mathnormal\\">ρ</span><span class=\\"mord\\"><span class=\\"mord mathnormal\\" style=\\"margin-right:0.03588em;\\">v</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8641079999999999em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\">2</span></span></span></span></span></span></span></span><span class=\\"mord mathnormal\\" style=\\"margin-right:0.05764em;\\">S</span><span class=\\"mord\\"><span class=\\"mord mathnormal\\" style=\\"margin-right:0.07153em;\\">C</span><span class=\\"msupsub\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.32833099999999993em;\\"><span style=\\"top:-2.5500000000000003em;margin-left:-0.07153em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathnormal mtight\\">L</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.15em;\\"><span></span></span></span></span></span></span></span></span></span></span></div>"`;
 
 exports[`sanitizes certain dangerous urls for links by default 1`] = `
 Array [

test/react-markdown.test.js

@@ -8,7 +8,8 @@ const visit = require('unist-util-visit')
 const ReactDom = require('react-dom/server')
 const renderer = require('react-test-renderer')
 const math = require('remark-math')
-const reactKatex = require('react-katex')
+const TeX = require('@matejmazur/react-katex')
+const {render} = require('@testing-library/react')
 const htmlParser = require('../src/plugins/html-parser')
 const Markdown = require('../src/react-markdown')
 const MarkdownWithHtml = require('../src/with-html')
@@ -703,31 +704,21 @@ test('can render the whole spectrum of markdown within a single run (with html p
 })
 
 test('passes along all props when the node type is unknown', () => {
-  expect.assertions(1)
-
-  /* eslint-disable no-console */
-  // React warns about something in react-katex currently.
-  const warn = console.warn
-  console.warn = Function.prototype
-
   const renderers = {
-    inlineMath: ({value}) => <reactKatex.InlineMath math={value} />,
-    math: ({value}) => <reactKatex.BlockMath math={value} />
+    inlineMath: ({value}) => <TeX math={value} />,
+    math: ({value}) => <TeX block math={value} />
   }
   renderers.inlineMath.displayName = 'inlineMath'
   renderers.math.displayName = 'math'
 
   const input =
     'Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.\n\n$$\nL = \\frac{1}{2} \\rho v^2 S C_L\n$$'
 
-  const component = renderer.create(
+  const component = render(
     <Markdown children={input} plugins={[math]} renderers={renderers} allowDangerousHtml />
-  )
-
-  expect(component.toJSON()).toMatchSnapshot()
+  ).container.innerHTML
 
-  console.warn = warn
-  /* eslint-enable no-console */
+  expect(component).toMatchSnapshot()
 })
 
 test('can match and reactify cheap/simple inline html', () => {