使用Mocha在react项目中使用文件保护程序测试文件下载时，会给出"ReferenceError:未定义HTMLAnchorElement“错误

Question

我正在尝试在一个react项目中点击一个按钮来测试文件下载，该项目使用来自npm file-saver https://www.npmjs.com/package/file-saver的'saveAs‘。

下载功能如下：

const downloadFile = (csvData) => {
    const dataFile = new Blob([csvData], {
        type: 'text/csv;charset=utf-8;'
    });
    saveAs(
        dataFile,
        `filename.csv`
    );
};

一个按钮组件使用这个函数，该函数被作为属性传递给它，并被称为'onClick‘。测试如下：

describe('<ExportButton/>', () => {
    let wrapper, props;

    beforeEach(() => {
        props = {
            ...defaultProps,
            handleOnClick: expect.createSpy(),
            downloadFile: expect.createSpy().andReturn(() => {})
        };

        wrapper = shallow(<ExportButton {...props} />);
    });

    afterEach(() => {
        expect.restoreSpies();
    });

   
    it('should call the downloadFile and save the file in location specified', (done) => {
        wrapper.find('Button').simulate('click');
        setTimeout(() => {
            expect(props.downloadFile).toHaveBeenCalled();
            done();
        }, 50);
    });
});

在运行它给出的测试时

ReferenceError:未定义HTMLAnchorElement

at /node_modules/file-saver/src/FileSaver.js:75:19 at /node_modules/file-saver/dist/FileSaver.min.js:1:106 at Object。(/node_modules/file-saver/dist/FileSaver.min.js:1:154)......

错误，测试失败。

有人能告诉我怎么解决这个问题吗？

提前感谢

Answer 1

在您的测试设置文件中，尝试设置以下内容：

global.HTMLAnchorElement = window.HTMLAnchorElement;