用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

很显然我没有使用正确的文件保护程序库。我使用的是这个filesaver.js项目，而不是最初的、维护良好的从亮灰中提取filesaver.js。在后面的库中，一切都工作得很好，而且浅层单元测试也是可能的，不会出现任何问题。