用 filesaver.js 反应浅层渲染单元测试

Question

我想测试一个在其方法之一中使用 filesaver.js 的组件，但是当我运行测试时，我收到以下错误：

TypeError: Cannot read property 'document' of undefined

      at node_modules\filesaver.js\FileSaver.js:22:15
      at Object.<anonymous> (node_modules\filesaver.js\FileSaver.js:241:2)
      at Object.<anonymous> (src\components\MyComponent.js:3:44)

我的测试看起来像：

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../MyComponent';

describe('<MyComponent /> test suite', function () {

   it('Smoke Test (Renders without crashing', () => {
       shallow(<MyComponent />)
   })
})

组件看起来像：

import React, { PropTypes } from 'react';

import { saveAs } from 'filesaver.js';

class MyComponent extends React.Component {
    constructor(props) {
        super(props)
    }

    handleFileDownload = (attachment) => {
        saveAs(attachment.blob, attachment.file_name)
    }

    render() {
        return (
            <button className="btn btn-default" aria-label="Download" onClick={() => this.handleFileDownload(this.props.attachment)}>
                <i className="icon icon-save" style={{ margin: '0' }} />
            </button>
    }
}

export default MyComponent;

我如何才能在我的组件中使用 filesaver.js 编写浅层测试，或者有没有办法模拟文件保护程序的导入，因为这是错误发生的地方？

Answer 1

好吧，显然我没有使用正确的文件保护程序库。我用了this filesaver.js project instead of the original and well maintained filesaver.js from eligrey。使用后来的库，一切都运行良好，并且可以毫无问题地进行浅层单元测试。

用 filesaver.js 反应浅层渲染单元测试

React shallow render unit test with filesaver.js

javascript

reactjs

enzyme

filesaver.js