Skip to content

Commit ba2d147

Browse files
ChristianMurphyChristianMurphy
committed
test: improve unit tests for useRemark hook
1 parent 71489d7 commit ba2d147

File tree

4 files changed

+292
-5
lines changed

4 files changed

+292
-5
lines changed

‎readme.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -155,9 +155,8 @@ import rehypeAutoLinkHeadings from 'rehype-autolink-headings';
155155
// ...
156156

157157
const [reactContent, setMarkdownSource] = useRemark({
158-
remarkParseOptions: { commonmark: true },
159158
remarkPlugins: [remarkGemoji],
160-
remarkToRehypeOptions: { commonmark: true },
159+
remarkToRehypeOptions: { allowDangerous: true },
161160
rehypePlugins: [rehypeSlug, rehypeAutoLinkHeadings],
162161
rehypeReactOptions: {
163162
components: {
@@ -179,9 +178,8 @@ import rehypeAutoLinkHeadings from 'rehype-autolink-headings';
179178
// ...
180179

181180
<Remark
182-
remarkParseOptions={{ commonmark: true }}
183181
remarkPlugins={[remarkGemoji]}
184-
remarkToRehypeOptions={{ commonmark: true }}
182+
remarkToRehypeOptions={{ allowDangerous: true }}
185183
rehypePlugins={[rehypeSlug, rehypeAutoLinkHeadings]}
186184
rehypeReactOptions={{
187185
components: {

‎src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
1616
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
1717

1818
export interface UseRemarkSyncOptions {
19-
remarkParseOptions?: Partial<RemarkParseOptions>;
19+
remarkParseOptions?: RemarkParseOptions;
2020
remarkToRehypeOptions?: RemarkRehypeOptions;
2121
rehypeReactOptions?: PartialBy<
2222
RehypeReactOptions<typeof createElement>,

‎test/__snapshots__/remark-hook.test.ts.snap

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,226 @@ exports[`useRemark should render content 1`] = `
77
</h1>
88
</React.Fragment>
99
`;
10+
11+
exports[`useRemark should support element renderer 1`] = `
12+
<React.Fragment>
13+
<h1>
14+
heading
15+
</h1>
16+
</React.Fragment>
17+
`;
18+
19+
exports[`useRemark should support gfm through remark plugins 1`] = `
20+
<React.Fragment>
21+
<p>
22+
<a
23+
href="https://example.com"
24+
>
25+
https://example.com
26+
</a>
27+
</p>
28+
</React.Fragment>
29+
`;
30+
31+
exports[`useRemark should support html through rehype plugins 1`] = `
32+
<React.Fragment>
33+
<p>
34+
<span>
35+
example
36+
</span>
37+
</p>
38+
</React.Fragment>
39+
`;
40+
41+
exports[`useRemark should support math through remark and rehype plugins 1`] = `
42+
<React.Fragment>
43+
<p>
44+
Lift(
45+
<span
46+
className="math math-inline"
47+
>
48+
<span
49+
className="katex"
50+
>
51+
<span
52+
className="katex-mathml"
53+
>
54+
<math
55+
xmlns="http://www.w3.org/1998/Math/MathML"
56+
>
57+
<semantics>
58+
<mrow>
59+
<mi>
60+
L
61+
</mi>
62+
</mrow>
63+
<annotation
64+
encoding="application/x-tex"
65+
>
66+
L
67+
</annotation>
68+
</semantics>
69+
</math>
70+
</span>
71+
<span
72+
aria-hidden="true"
73+
className="katex-html"
74+
>
75+
<span
76+
className="base"
77+
>
78+
<span
79+
className="strut"
80+
style={
81+
Object {
82+
"height": "0.68333em",
83+
"verticalAlign": "0em",
84+
}
85+
}
86+
/>
87+
<span
88+
className="mord mathnormal"
89+
>
90+
L
91+
</span>
92+
</span>
93+
</span>
94+
</span>
95+
</span>
96+
) can be determined by Lift Coefficient (
97+
<span
98+
className="math math-inline"
99+
>
100+
<span
101+
className="katex"
102+
>
103+
<span
104+
className="katex-mathml"
105+
>
106+
<math
107+
xmlns="http://www.w3.org/1998/Math/MathML"
108+
>
109+
<semantics>
110+
<mrow>
111+
<msub>
112+
<mi>
113+
C
114+
</mi>
115+
<mi>
116+
L
117+
</mi>
118+
</msub>
119+
</mrow>
120+
<annotation
121+
encoding="application/x-tex"
122+
>
123+
C_L
124+
</annotation>
125+
</semantics>
126+
</math>
127+
</span>
128+
<span
129+
aria-hidden="true"
130+
className="katex-html"
131+
>
132+
<span
133+
className="base"
134+
>
135+
<span
136+
className="strut"
137+
style={
138+
Object {
139+
"height": "0.83333em",
140+
"verticalAlign": "-0.15em",
141+
}
142+
}
143+
/>
144+
<span
145+
className="mord"
146+
>
147+
<span
148+
className="mord mathnormal"
149+
style={
150+
Object {
151+
"marginRight": "0.07153em",
152+
}
153+
}
154+
>
155+
C
156+
</span>
157+
<span
158+
className="msupsub"
159+
>
160+
<span
161+
className="vlist-t vlist-t2"
162+
>
163+
<span
164+
className="vlist-r"
165+
>
166+
<span
167+
className="vlist"
168+
style={
169+
Object {
170+
"height": "0.32833099999999993em",
171+
}
172+
}
173+
>
174+
<span
175+
style={
176+
Object {
177+
"marginLeft": "-0.07153em",
178+
"marginRight": "0.05em",
179+
"top": "-2.5500000000000003em",
180+
}
181+
}
182+
>
183+
<span
184+
className="pstrut"
185+
style={
186+
Object {
187+
"height": "2.7em",
188+
}
189+
}
190+
/>
191+
<span
192+
className="sizing reset-size6 size3 mtight"
193+
>
194+
<span
195+
className="mord mathnormal mtight"
196+
>
197+
L
198+
</span>
199+
</span>
200+
</span>
201+
</span>
202+
<span
203+
className="vlist-s"
204+
>
205+
​
206+
</span>
207+
</span>
208+
<span
209+
className="vlist-r"
210+
>
211+
<span
212+
className="vlist"
213+
style={
214+
Object {
215+
"height": "0.15em",
216+
}
217+
}
218+
>
219+
<span />
220+
</span>
221+
</span>
222+
</span>
223+
</span>
224+
</span>
225+
</span>
226+
</span>
227+
</span>
228+
</span>
229+
) like the following equation.
230+
</p>
231+
</React.Fragment>
232+
`;

‎test/remark-hook.test.ts

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1+
import { createElement } from 'react';
2+
import type { ComponentPropsWithoutNode } from 'rehype-react';
13
import { renderHook, act } from '@testing-library/react-hooks';
24
import '@testing-library/jest-dom/extend-expect';
5+
import remarkGfm from 'remark-gfm';
6+
import rehypeRaw from 'rehype-raw';
7+
import rehypeSanitize from 'rehype-sanitize';
8+
import remarkMath from 'remark-math';
9+
import rehypeKatex from 'rehype-katex';
310
import { useRemark } from '../src';
411

512
describe('useRemark', () => {
@@ -11,4 +18,63 @@ describe('useRemark', () => {
1118
await waitForNextUpdate();
1219
expect(result.current[0]).toMatchSnapshot();
1320
});
21+
22+
it('should support gfm through remark plugins', async () => {
23+
const { result, waitForNextUpdate } = renderHook(() =>
24+
useRemark({ remarkPlugins: [remarkGfm] })
25+
);
26+
act(() => {
27+
result.current[1]('https://example.com');
28+
});
29+
await waitForNextUpdate();
30+
expect(result.current[0]).toMatchSnapshot();
31+
});
32+
33+
it('should support html through rehype plugins', async () => {
34+
const { result, waitForNextUpdate } = renderHook(() =>
35+
useRemark({
36+
remarkToRehypeOptions: { allowDangerousHtml: true },
37+
rehypePlugins: [rehypeRaw, rehypeSanitize],
38+
})
39+
);
40+
act(() => {
41+
result.current[1]('<span>example</span>');
42+
});
43+
await waitForNextUpdate();
44+
expect(result.current[0]).toMatchSnapshot();
45+
});
46+
47+
it('should support math through remark and rehype plugins', async () => {
48+
const { result, waitForNextUpdate } = renderHook(() =>
49+
useRemark({
50+
remarkPlugins: [remarkMath],
51+
rehypePlugins: [rehypeKatex],
52+
})
53+
);
54+
act(() => {
55+
result.current[1](
56+
'Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.'
57+
);
58+
});
59+
await waitForNextUpdate();
60+
expect(result.current[0]).toMatchSnapshot();
61+
});
62+
63+
it('should support custom element renderer', async () => {
64+
const { result, waitForNextUpdate } = renderHook(() =>
65+
useRemark({
66+
rehypeReactOptions: {
67+
components: {
68+
h1: (props: ComponentPropsWithoutNode) =>
69+
createElement('h2', props),
70+
},
71+
},
72+
})
73+
);
74+
act(() => {
75+
result.current[1]('# heading');
76+
});
77+
await waitForNextUpdate();
78+
expect(result.current[0]).toMatchSnapshot();
79+
});
1480
});

0 commit comments

Comments
 (0)