diff --git a/webapp/channels/src/components/latex_block/__snapshots__/latex_block.test.tsx.snap b/webapp/channels/src/components/latex_block/__snapshots__/latex_block.test.tsx.snap
index 3360da6101..bd1d799984 100644
--- a/webapp/channels/src/components/latex_block/__snapshots__/latex_block.test.tsx.snap
+++ b/webapp/channels/src/components/latex_block/__snapshots__/latex_block.test.tsx.snap
@@ -2,18 +2,23 @@
exports[`components/LatexBlock error in katex 1`] = `
\`\`\`latex e^{i\\\\pi + 1 = 0\`\`\`",
- }
- }
-/>
+ class="post-body--code tex"
+ data-testid="latex-enabled"
+>
+
+ \`\`\`latex e^{i\\pi + 1 = 0\`\`\`
+
+
`;
exports[`components/LatexBlock latex is disabled 1`] = `
\`\`\`latex e^{i\\pi} + 1 = 0\`\`\`
@@ -21,11 +26,248 @@ exports[`components/LatexBlock latex is disabled 1`] = `
exports[`components/LatexBlock should match snapshot 1`] = `
‘‘‘latexeiπ+1=0‘‘‘",
- }
- }
-/>
+ class="post-body--code tex"
+ data-testid="latex-enabled"
+>
+
+
+
+
+
+
+
+
+
+ ‘‘‘
+
+
+ l
+
+
+ a
+
+
+ t
+
+
+ e
+
+
+ x
+
+
+
+ e
+
+
+
+
+
+
+
+
+
+
+ iπ
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ 1
+
+
+
+ =
+
+
+
+
+
+
+ 0‘‘‘
+
+
+
+
+
+
`;
diff --git a/webapp/channels/src/components/latex_block/latex_block.test.tsx b/webapp/channels/src/components/latex_block/latex_block.test.tsx
index b27bd11c54..d2f59d6d0c 100644
--- a/webapp/channels/src/components/latex_block/latex_block.test.tsx
+++ b/webapp/channels/src/components/latex_block/latex_block.test.tsx
@@ -1,11 +1,13 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
+import {render, screen} from '@testing-library/react';
import React from 'react';
import LatexBlock from 'components/latex_block/latex_block';
+import {withIntl} from 'tests/helpers/intl-test-helper';
+
describe('components/LatexBlock', () => {
const defaultProps = {
content: '```latex e^{i\\pi} + 1 = 0```',
@@ -13,9 +15,10 @@ describe('components/LatexBlock', () => {
};
test('should match snapshot', async () => {
- const wrapper = shallow();
- await import('katex'); //manually import katex
- expect(wrapper).toMatchSnapshot();
+ render();
+ const wrapper = await screen.findAllByTestId('latex-enabled');
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.at(0)).toMatchSnapshot();
});
test('latex is disabled', async () => {
@@ -24,9 +27,10 @@ describe('components/LatexBlock', () => {
enableLatex: false,
};
- const wrapper = shallow();
- await import('katex'); //manually import katex
- expect(wrapper).toMatchSnapshot();
+ render();
+ const wrapper = await screen.findAllByTestId('latex-disabled');
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.at(0)).toMatchSnapshot();
});
test('error in katex', async () => {
@@ -35,8 +39,9 @@ describe('components/LatexBlock', () => {
enableLatex: true,
};
- const wrapper = shallow();
- await import('katex'); //manually import katex
- expect(wrapper).toMatchSnapshot();
+ render(withIntl());
+ const wrapper = await screen.findAllByTestId('latex-enabled');
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.at(0)).toMatchSnapshot();
});
});
diff --git a/webapp/channels/src/components/latex_block/latex_block.tsx b/webapp/channels/src/components/latex_block/latex_block.tsx
index 528f3c59f8..fc7b196157 100644
--- a/webapp/channels/src/components/latex_block/latex_block.tsx
+++ b/webapp/channels/src/components/latex_block/latex_block.tsx
@@ -2,74 +2,71 @@
// See LICENSE.txt for license information.
import type {KatexOptions} from 'katex';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
import {FormattedMessage} from 'react-intl';
type Katex = typeof import('katex');
type Props = {
content: string;
- enableLatex: boolean;
+ enableLatex?: boolean;
};
-type State = {
- katex?: Katex;
-}
+const LatexBlock = ({
+ content,
+ enableLatex,
+}: Props) => {
+ const [katex, setKatex] = useState();
-export default class LatexBlock extends React.PureComponent {
- constructor(props: Props) {
- super(props);
-
- this.state = {
- katex: undefined,
- };
- }
-
- componentDidMount(): void {
+ useEffect(() => {
import('katex').then((katex) => {
- this.setState({katex: katex.default});
+ setKatex(katex.default);
});
+ }, []);
+
+ if (!enableLatex || katex === undefined) {
+ return (
+
+ {content}
+
+ );
}
- render(): React.ReactNode {
- if (!this.props.enableLatex || this.state.katex === undefined) {
- return (
-
- {this.props.content}
-
- );
- }
+ try {
+ const katexOptions: KatexOptions = {
+ throwOnError: false,
+ displayMode: true,
+ maxSize: 200,
+ maxExpand: 100,
+ fleqn: true,
+ };
- try {
- const katexOptions: KatexOptions = {
- throwOnError: false,
- displayMode: true,
- maxSize: 200,
- maxExpand: 100,
- fleqn: true,
- };
+ const html = katex.renderToString(content, katexOptions);
- const html = this.state.katex.renderToString(this.props.content, katexOptions);
-
- return (
-
+ );
+ } catch (e) {
+ // This is never run because throwOnError is false
+ return (
+
+
- );
- } catch (e) {
- return (
-
-
-
- );
- }
+