Skip to content

Commit 35585cc

Browse files
ChristianMurphyChristianMurphy
committed
test: useRemarkSync hook
1 parent 966bd58 commit 35585cc

File tree

2 files changed

+283
-1
lines changed

2 files changed

+283
-1
lines changed

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

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,3 +230,234 @@ exports[`useRemark should support math through remark and rehype plugins 1`] = `
230230
</p>
231231
</React.Fragment>
232232
`;
233+
234+
exports[`useRemarkSync should render content 1`] = `
235+
<React.Fragment>
236+
<h1>
237+
header
238+
</h1>
239+
</React.Fragment>
240+
`;
241+
242+
exports[`useRemarkSync should support custom element renderer 1`] = `
243+
<React.Fragment>
244+
<h1>
245+
heading
246+
</h1>
247+
</React.Fragment>
248+
`;
249+
250+
exports[`useRemarkSync should support gfm through remark plugins 1`] = `
251+
<React.Fragment>
252+
<p>
253+
<a
254+
href="https://example.com"
255+
>
256+
https://example.com
257+
</a>
258+
</p>
259+
</React.Fragment>
260+
`;
261+
262+
exports[`useRemarkSync should support html through rehype plugins 1`] = `
263+
<React.Fragment>
264+
<p>
265+
<span>
266+
example
267+
</span>
268+
</p>
269+
</React.Fragment>
270+
`;
271+
272+
exports[`useRemarkSync should support math through remark and rehype plugins 1`] = `
273+
<React.Fragment>
274+
<p>
275+
Lift(
276+
<span
277+
className="math math-inline"
278+
>
279+
<span
280+
className="katex"
281+
>
282+
<span
283+
className="katex-mathml"
284+
>
285+
<math
286+
xmlns="http://www.w3.org/1998/Math/MathML"
287+
>
288+
<semantics>
289+
<mrow>
290+
<mi>
291+
L
292+
</mi>
293+
</mrow>
294+
<annotation
295+
encoding="application/x-tex"
296+
>
297+
L
298+
</annotation>
299+
</semantics>
300+
</math>
301+
</span>
302+
<span
303+
aria-hidden="true"
304+
className="katex-html"
305+
>
306+
<span
307+
className="base"
308+
>
309+
<span
310+
className="strut"
311+
style={
312+
Object {
313+
"height": "0.68333em",
314+
"verticalAlign": "0em",
315+
}
316+
}
317+
/>
318+
<span
319+
className="mord mathnormal"
320+
>
321+
L
322+
</span>
323+
</span>
324+
</span>
325+
</span>
326+
</span>
327+
) can be determined by Lift Coefficient (
328+
<span
329+
className="math math-inline"
330+
>
331+
<span
332+
className="katex"
333+
>
334+
<span
335+
className="katex-mathml"
336+
>
337+
<math
338+
xmlns="http://www.w3.org/1998/Math/MathML"
339+
>
340+
<semantics>
341+
<mrow>
342+
<msub>
343+
<mi>
344+
C
345+
</mi>
346+
<mi>
347+
L
348+
</mi>
349+
</msub>
350+
</mrow>
351+
<annotation
352+
encoding="application/x-tex"
353+
>
354+
C_L
355+
</annotation>
356+
</semantics>
357+
</math>
358+
</span>
359+
<span
360+
aria-hidden="true"
361+
className="katex-html"
362+
>
363+
<span
364+
className="base"
365+
>
366+
<span
367+
className="strut"
368+
style={
369+
Object {
370+
"height": "0.83333em",
371+
"verticalAlign": "-0.15em",
372+
}
373+
}
374+
/>
375+
<span
376+
className="mord"
377+
>
378+
<span
379+
className="mord mathnormal"
380+
style={
381+
Object {
382+
"marginRight": "0.07153em",
383+
}
384+
}
385+
>
386+
C
387+
</span>
388+
<span
389+
className="msupsub"
390+
>
391+
<span
392+
className="vlist-t vlist-t2"
393+
>
394+
<span
395+
className="vlist-r"
396+
>
397+
<span
398+
className="vlist"
399+
style={
400+
Object {
401+
"height": "0.32833099999999993em",
402+
}
403+
}
404+
>
405+
<span
406+
style={
407+
Object {
408+
"marginLeft": "-0.07153em",
409+
"marginRight": "0.05em",
410+
"top": "-2.5500000000000003em",
411+
}
412+
}
413+
>
414+
<span
415+
className="pstrut"
416+
style={
417+
Object {
418+
"height": "2.7em",
419+
}
420+
}
421+
/>
422+
<span
423+
className="sizing reset-size6 size3 mtight"
424+
>
425+
<span
426+
className="mord mathnormal mtight"
427+
>
428+
L
429+
</span>
430+
</span>
431+
</span>
432+
</span>
433+
<span
434+
className="vlist-s"
435+
>
436+
​
437+
</span>
438+
</span>
439+
<span
440+
className="vlist-r"
441+
>
442+
<span
443+
className="vlist"
444+
style={
445+
Object {
446+
"height": "0.15em",
447+
}
448+
}
449+
>
450+
<span />
451+
</span>
452+
</span>
453+
</span>
454+
</span>
455+
</span>
456+
</span>
457+
</span>
458+
</span>
459+
</span>
460+
) like the following equation.
461+
</p>
462+
</React.Fragment>
463+
`;

‎test/remark-hook.test.ts

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import rehypeRaw from 'rehype-raw';
77
import rehypeSanitize from 'rehype-sanitize';
88
import remarkMath from 'remark-math';
99
import rehypeKatex from 'rehype-katex';
10-
import { useRemark } from '../src';
10+
import { useRemark, useRemarkSync } from '../src';
1111

1212
describe('useRemark', () => {
1313
it('should render content', async () => {
@@ -78,3 +78,54 @@ describe('useRemark', () => {
7878
expect(result.current[0]).toMatchSnapshot();
7979
});
8080
});
81+
82+
describe('useRemarkSync', () => {
83+
it('should render content', async () => {
84+
const { result } = renderHook(() => useRemarkSync('# header'));
85+
expect(result.current).toMatchSnapshot();
86+
});
87+
88+
it('should support gfm through remark plugins', async () => {
89+
const { result } = renderHook(() =>
90+
useRemarkSync('https://example.com', { remarkPlugins: [remarkGfm] })
91+
);
92+
expect(result.current).toMatchSnapshot();
93+
});
94+
95+
it('should support html through rehype plugins', async () => {
96+
const { result } = renderHook(() =>
97+
useRemarkSync('<span>example</span>', {
98+
remarkToRehypeOptions: { allowDangerousHtml: true },
99+
rehypePlugins: [rehypeRaw, rehypeSanitize],
100+
})
101+
);
102+
expect(result.current).toMatchSnapshot();
103+
});
104+
105+
it('should support math through remark and rehype plugins', async () => {
106+
const { result } = renderHook(() =>
107+
useRemarkSync(
108+
'Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.',
109+
{
110+
remarkPlugins: [remarkMath],
111+
rehypePlugins: [rehypeKatex],
112+
}
113+
)
114+
);
115+
expect(result.current).toMatchSnapshot();
116+
});
117+
118+
it('should support custom element renderer', async () => {
119+
const { result } = renderHook(() =>
120+
useRemarkSync('# heading', {
121+
rehypeReactOptions: {
122+
components: {
123+
h1: (props: ComponentPropsWithoutNode) =>
124+
createElement('h2', props),
125+
},
126+
},
127+
})
128+
);
129+
expect(result.current).toMatchSnapshot();
130+
});
131+
});

0 commit comments

Comments
 (0)