Skip to content

Commit 634f88d

Browse files
rexxarsrexxars
authored
Add tests on React 17
Closes GH-498. Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com> Reviewed-by: Titus Wormer <tituswormer@gmail.com>
1 parent aa42b5b commit 634f88d

File tree

4 files changed

+21
-57
lines changed

4 files changed

+21
-57
lines changed

‎package.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@
3939
"dependencies": {
4040
"@types/mdast": "^3.0.3",
4141
"@types/unist": "^2.0.3",
42-
"html-to-react": "^1.3.4",
42+
"html-to-react": "^1.4.5",
4343
"mdast-add-list-metadata": "1.0.1",
4444
"prop-types": "^15.7.2",
45-
"react-is": "^16.8.6",
45+
"react-is": "^17.0.0",
4646
"remark-parse": "^9.0.0",
4747
"unified": "^9.0.0",
4848
"unist-util-visit": "^2.0.0",
@@ -57,11 +57,13 @@
5757
"@babel/core": "^7.0.0",
5858
"@babel/preset-env": "^7.0.0",
5959
"@babel/preset-react": "^7.0.0",
60+
"@matejmazur/react-katex": "^3.0.0",
6061
"@rollup/plugin-babel": "^5.0.0",
6162
"@rollup/plugin-commonjs": "^16.0.0",
6263
"@rollup/plugin-json": "^4.0.0",
6364
"@rollup/plugin-node-resolve": "^10.0.0",
6465
"@rollup/plugin-replace": "^2.0.0",
66+
"@testing-library/react": "^11.0.0",
6567
"@types/react": "^16.0.0",
6668
"@types/react-dom": "^16.0.0",
6769
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -71,12 +73,12 @@
7173
"eslint-config-sanity": "^4.0.0",
7274
"eslint-plugin-react": "^7.0.0",
7375
"jest": "^26.0.0",
76+
"katex": "^0.12.0",
7477
"npm-run-all": "^4.0.0",
7578
"prettier": "^2.0.0",
76-
"react": "^16.0.0",
77-
"react-dom": "^16.0.0",
78-
"react-katex": "^2.0.0",
79-
"react-test-renderer": "^16.0.0",
79+
"react": "^17.0.0",
80+
"react-dom": "^17.0.0",
81+
"react-test-renderer": "^17.0.0",
8082
"remark-cli": "^9.0.0",
8183
"remark-gfm": "^1.0.0",
8284
"remark-math": "^4.0.0",

‎readme.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -281,19 +281,19 @@ render(<ReactMarkdown renderers={renderers} children={markdown} />, document.bod
281281

282282
This example shows how a syntax extension is used to support math in markdown
283283
that adds new node types ([`remark-math`][math]), which are then handled by
284-
renderers to use [`react-katex`][react-katex]:
284+
renderers to use [`@matejmazur/react-katex`][react-katex]:
285285

286286
```jsx
287287
import React from 'react'
288288
import ReactMarkdown from 'react-markdown'
289-
import {InlineMath, BlockMath} from 'react-katex'
289+
import Tex from '@matejmazur/react-katex'
290290
import {render} from 'react-dom'
291291
import math from 'remark-math'
292292
import 'katex/dist/katex.min.css' // `react-katex` does not import the CSS for you
293293

294294
const renderers = {
295-
inlineMath: ({value}) => <InlineMath math={value} />,
296-
math: ({value}) => <BlockMath math={value} />
295+
inlineMath: ({value}) => <Tex math={value} />,
296+
math: ({value}) => <Tex block math={value} />
297297
}
298298

299299
render(
@@ -494,7 +494,7 @@ abide by its terms.
494494

495495
[security]: #security
496496

497-
[react-katex]: https://github.com/talyssonoc/react-katex
497+
[react-katex]: https://github.com/MatejBransky/react-katex
498498

499499
[react-syntax-highlighter]: https://github.com/react-syntax-highlighter/react-syntax-highlighter
500500

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

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1007,36 +1007,7 @@ exports[`can use parser plugins 1`] = `
10071007
</p>
10081008
`;
10091009

1010-
exports[`passes along all props when the node type is unknown 1`] = `
1011-
Array [
1012-
<p>
1013-
Lift(
1014-
<span
1015-
dangerouslySetInnerHTML={
1016-
Object {
1017-
"__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>",
1018-
}
1019-
}
1020-
/>
1021-
) can be determined by Lift Coefficient (
1022-
<span
1023-
dangerouslySetInnerHTML={
1024-
Object {
1025-
"__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>",
1026-
}
1027-
}
1028-
/>
1029-
) like the following equation.
1030-
</p>,
1031-
<div
1032-
dangerouslySetInnerHTML={
1033-
Object {
1034-
"__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>",
1035-
}
1036-
}
1037-
/>,
1038-
]
1039-
`;
1010+
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>"`;
10401011

10411012
exports[`sanitizes certain dangerous urls for links by default 1`] = `
10421013
Array [

‎test/react-markdown.test.js‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ const visit = require('unist-util-visit')
88
const ReactDom = require('react-dom/server')
99
const renderer = require('react-test-renderer')
1010
const math = require('remark-math')
11-
const reactKatex = require('react-katex')
11+
const TeX = require('@matejmazur/react-katex')
12+
const {render} = require('@testing-library/react')
1213
const htmlParser = require('../src/plugins/html-parser')
1314
const Markdown = require('../src/react-markdown')
1415
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
703704
})
704705

705706
test('passes along all props when the node type is unknown', () => {
706-
expect.assertions(1)
707-
708-
/* eslint-disable no-console */
709-
// React warns about something in react-katex currently.
710-
const warn = console.warn
711-
console.warn = Function.prototype
712-
713707
const renderers = {
714-
inlineMath: ({value}) => <reactKatex.InlineMath math={value} />,
715-
math: ({value}) => <reactKatex.BlockMath math={value} />
708+
inlineMath: ({value}) => <TeX math={value} />,
709+
math: ({value}) => <TeX block math={value} />
716710
}
717711
renderers.inlineMath.displayName = 'inlineMath'
718712
renderers.math.displayName = 'math'
719713

720714
const input =
721715
'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$$'
722716

723-
const component = renderer.create(
717+
const component = render(
724718
<Markdown children={input} plugins={[math]} renderers={renderers} allowDangerousHtml />
725-
)
726-
727-
expect(component.toJSON()).toMatchSnapshot()
719+
).container.innerHTML
728720

729-
console.warn = warn
730-
/* eslint-enable no-console */
721+
expect(component).toMatchSnapshot()
731722
})
732723

733724
test('can match and reactify cheap/simple inline html', () => {

0 commit comments

Comments
 (0)