单元测试包含 MathJax 的 React 组件答案

【问题标题】：Unit testing React component that includes MathJax单元测试包含 MathJax 的 React 组件
【发布时间】：2017-11-19 21:35:56
【问题描述】：

我正在寻找一种方法来对涉及 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(...
}

【问题讨论】：

您是想在单元测试中测试 MathJax 本身，还是只想测试 React 组件？如果您可以将 MathJax 存根，您可以将一些存根添加到全局范围中。 jaketrent.com/post/testing-react-with-jsdom
啊，对。我忘记了存根。谢谢。我认为这应该可以解决问题。我现在必须尝试一下。
实际上，我不需要模拟 MathJax，因为我只是在测试 React 组件。问题是组件的浅渲染在发现组件文件中没有引用MathJax时会出错。（它位于</body> 之前的<script> 标记中。
对，看看 MathJax，它看起来像是将自己注入到全局范围内。因此，如果您使用 jsdom 设置执行 global.MathJax = {Hub: {...}} 之类的操作，您的浅化渲染应该能够找到它。我对 MathJax 并不特别熟悉，所以它可能正在做一些我不知道的时髦的事情。
@NickWyman 我对此有点自责。对于需要设置为全局变量的其他项目，我完全按照您的建议进行了操作，但我没有想到在这里这样做。谢谢！这解决了我的问题。

标签： javascript unit-testing reactjs mocha.js mathjax

【解决方案1】：

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

这应该允许您像所有其他反应组件一样测试“MathJax”组件。

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

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

【讨论】：