包含MathJax的單元測試React組件

Question

我正在尋找一種對涉及MathJax的React組件進行單元測試的方法。 當前，讓MathJax在實際代碼中運行的唯一方法是通過script標簽：

<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。

我試過import MathJax from 'mathjax'; 從NPM模塊中獲取，但這當然不起作用，因為MathJax並非旨在從導入中使用。

我也嘗試添加MathJax 單個文件版本，但是我的代碼在嚴格模式下運行，由於使用了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 個解決方案

解決方案1
0 2018-10-29 21:39:03

包含MathJax的單元測試React組件

問題描述

1 個解決方案

解決方案1 0 2018-10-29 21:39:03

解決方案1
0 2018-10-29 21:39:03