Question

我正在寻找一种单元测试涉及MathJax的React组件的方法。目前，我在实际代码中使用MathJax的唯一方法是通过脚本标记：

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML'></script>

这在实际代码中工作正常，但测试环境不同。我已经尝试将上面的内容添加到JSDOM的初始创建中：

const dom = new JSDOM(`
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML'></script>
  </body>
</html>
`);

但它产生了：

ReferenceError：未定义MathJax。

我已经尝试过来自NPM模块的import MathJax from 'mathjax';，但这当然不起作用，因为MathJax不是设计用于导入的。

我也尝试添加MathJax single file版本，但我的代码以严格模式运行，由于使用arguments.callee等原因而导致尝试实现它们时出错。

所以我对如何对涉及MathJax的组件进行单元测试感到茫然。

以下是测试：

describe('test', () => {
  it('should render', () => {
    const wrapper = shallow(<TheComponent {...props} />); // this seems to be where the problem originates
  });
});

ReferenceError：未定义MathJax。

这是组件：

constructor (props) {
  super(props);
  MathJax.Hub.Config(...
}

componentDidMount () {
  MathJax.Hub.Queue(...
}

componentDidUpdate () {
  MathJax.Hub.Queue(...
}

Answer 1

有一个MathJax-React库可能会有所帮助。 https://www.npmjs.com/package/react-mathjax

这应该可以让您像其他所有React组件一样测试“ MathJax”组件。

const tex = `\frac{3}{4}`

module.exports = () => {
  return (
    <MathJax.Provider>
      <MathJax.Node formula={tex} />
    </MathJax.Provider>
  );
}

单元测试包含MathJax的React组件

1 个答案: