如何使用 Jest/Enzyme 在 React 中测试文件类型输入的更改处理程序？

IT技术 javascript reactjs filereader jestjs enzyme
2021-05-13 04:17:55

我想测试我的 React 组件是否可以用于FileReader从<input type="file"/>元素导入用户选择的文件的内容。我下面的代码显示了一个测试失败的工作组件。

在我的测试中，我试图使用 blob 作为文件的替代品，因为 blob 也可以被FileReader. 这是一种有效的方法吗？我还怀疑问题的一部分reader.onload是异步的，我的测试需要考虑到这一点。我需要在某个地方做出Promise吗？或者，我可能需要FileReader使用jest.fn()?

我真的更愿意只使用标准的 React 堆栈。特别是我想使用 Jest 和 Enzyme 而不必使用 Jasmine 或 Sinon 等。但是，如果您知道Jest/Enzyme无法完成某些事情但可以通过其他方式完成，那也可能会有所帮助。

我的组件.js：

import React from 'react';
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {fileContents: ''};
        this.changeHandler = this.changeHandler.bind(this);
    }
    changeHandler(evt) {
        const reader = new FileReader();
        reader.onload = () => {
            this.setState({fileContents: reader.result});
            console.log('file contents:', this.state.fileContents);
        };
        reader.readAsText(evt.target.files[0]);
    }
    render() {
        return <input type="file" onChange={this.changeHandler}/>;
    }
}
export default MyComponent;

MyComponent.test.js：

import React from 'react'; import {shallow} from 'enzyme'; import MyComponent from './MyComponent';
it('should test handler', () => {
    const blob = new Blob(['foo'], {type : 'text/plain'});
    shallow(<MyComponent/>).find('input')
        .simulate('change', { target: { files: [ blob ] } });
    expect(this.state('fileContents')).toBe('foo');
});
1个回答

这个答案展示了如何使用 jest 访问代码的所有不同部分。然而，这并不一定意味着应该以这种方式测试所有这些部分。

被测代码与问题中的代码基本相同，只是我替换addEventListener('load', ...了onload = ...，并且删除了该console.log行：

我的组件.js：

import React from 'react';
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {fileContents: ''};
        this.changeHandler = this.changeHandler.bind(this);
    }
    changeHandler(evt) {
        const reader = new FileReader();
        reader.addEventListener('load', () => {
            this.setState({fileContents: reader.result});
        });
        reader.readAsText(evt.target.files[0]);
    }
    render() {
        return <input type="file" onChange={this.changeHandler}/>;
    }
}
export default MyComponent;

我相信我已经设法测试了被测代码中的几乎所有内容（评论中指出并在下面进一步讨论的一个例外），如下所示：

MyComponent.test.js :

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

it('should test handler', () => {
    const componentWrapper   = mount(<MyComponent/>);
    const component          = componentWrapper.get(0);
    // should the line above use `componentWrapper.instance()` instead?
    const fileContents       = 'file contents';
    const expectedFinalState = {fileContents: fileContents};
    const file               = new Blob([fileContents], {type : 'text/plain'});
    const readAsText         = jest.fn();
    const addEventListener   = jest.fn((_, evtHandler) => { evtHandler(); });
        // WARNING: But read the comment by Drenai for a potentially serious
        // problem with the above test of `addEventListener`.
    const dummyFileReader    = {addEventListener, readAsText, result: fileContents};
    window.FileReader        = jest.fn(() => dummyFileReader);

    spyOn(component, 'setState').and.callThrough();
    // spyOn(component, 'changeHandler').and.callThrough(); // not yet working

    componentWrapper.find('input').simulate('change', {target: {files: [file]}});

    expect(FileReader        ).toHaveBeenCalled    (                             );
    expect(addEventListener  ).toHaveBeenCalledWith('load', jasmine.any(Function));
    expect(readAsText        ).toHaveBeenCalledWith(file                         );
    expect(component.setState).toHaveBeenCalledWith(expectedFinalState           );
    expect(component.state   ).toEqual             (expectedFinalState           );
    // expect(component.changeHandler).toHaveBeenCalled(); // not yet working
});

我还没有明确测试的一件事是是否changeHandler被调用。这似乎应该很容易，但无论出于何种原因，我仍然无法理解。它清楚地已被调用，其他功能嘲笑之内就被证实已经被调用但我还没能检查自己是否是所谓的，或者使用jest.fn()甚至茉莉花的spyOn。我在 SO 上问了另一个问题，试图解决这个遗留问题。

其它你可能感兴趣的问题
上一篇使用 React 时出现类型错误：无法读取未定义的属性“firstChild” 下一篇在同一设备上打印具有不同属性的多种材料