Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tests on React 17 #498

Merged
merged 3 commits into from
Dec 10, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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

Expand Down
31 changes: 1 addition & 30 deletions test/__snapshots__/react-markdown.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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 [
Expand Down
23 changes: 7 additions & 16 deletions test/react-markdown.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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', () => {
Expand Down