Javascript 输入类型文件的反应式上传表单的Jest测试用例<；输入类型="；文件"；formControlName="；“用户列表”&燃气轮机；（7）

我在angular 7中实现了一个反应式上传表单。表单工作正常，但无法添加单元测试用例，因为

patchValue

或setValue不允许我们在输入类型文件中设置虚拟数据。有人能建议我用Creative表单为输入类型文件编写一个测试用例吗？我想测试导入器（）

import-users.component.html

<form [formGroup]="importForm">
    <input type="file" (change)="fileEvent($event)" name="userslist" formControlName="userslist">
< /form>

---

导入-users.component.spec.ts

it('should import users', () => {
    const file = { name: 'user.csv', type: 'text/csv' } as File;
    jest.spyOn(userService, 'importUsers');
    component.importForm.patchValue({
        userslist: file,
    });
    component.importUsers();
    expect(userService.importUsers).toHaveBeenCalled();
});

使用上面的测试用例，我得到以下错误消息-

InvalidStateError：此输入元素接受文件名，该文件名只能通过编程设置为空字符串

---

我能够按照此处的说明解决此错误

description（'fileInput'，（）=>{
让fileInput:HTMLElement；
让上传按钮：HTMLElement；
让FileInputFileGet；
让fileInputValueGet；
让fileInputValueSet；
让fileInputValue=''；
常量fileFixture:部分={
名称：“myimage.png”，
上次修改：158040631732，
尺码：703786，
键入：“图像/png”
};
beforeach（异步（）=>{
常量{getByLabelText，getByText}=render(
);
fileInput=getByLabelText（“文件输入”）；
uploadButton=getByText（'UPLOAD'）；
fileInputFileGet=jest.fn（）；
fileInputValueGet=jest.fn（）.mockReturnValue（fileFixture）；
fileInputValueSet=jest.fn（）.mockImplementation（v=>{
fileInputValue=v；
});
Object.defineProperty（fileInput，'files'{
get:fileInputFilesGet
});
Object.defineProperty（fileInput，'value'{
get:fileInputValueGet，
set:fileInputValueSet
});
});
它（'单击上载按钮时上载文件'，async（）=>{
fileInputValue='myimage.png'；
FileInputFileGet.mockReturnValue（[fileFixture]）；
等待动作（异步（）=>{
fireEvent.单击（上载按钮）；
});
....
});

it('should import users', () => {
    const file = { name: 'user.csv', type: 'text/csv' } as File;
    jest.spyOn(userService, 'importUsers');
    component.importForm.patchValue({
        userslist: file,
    });
    component.importUsers();
    expect(userService.importUsers).toHaveBeenCalled();
});

describe('fileInput',() => {
    let fileInput: HTMLElement;
    let uploadButton: HTMLElement;
    let fileInputFilesGet;
    let fileInputValueGet;
    let fileInputValueSet;
    let fileInputValue = '';

    const fileFixture: Partial<File> = {
        name: 'myimage.png', 
        lastModified: 1580400631732, 
        size: 703786, 
        type: 'image/png'
    };

    beforeEach(async () => {
        const { getByLabelText, getByText } = render (
            <FileInput/> 
        );

        fileInput = getByLabelText('File Input');
        uploadButton = getByText('UPLOAD');
        fileInputFilesGet = jest.fn();
        fileInputValueGet = jest.fn().mockReturnValue(fileFixture);
        fileInputValueSet = jest.fn().mockImplementation(v => {
          fileInputValue = v;
        });

        Object.defineProperty(fileInput, 'files', {
          get: fileInputFilesGet
        });

        Object.defineProperty(fileInput, 'value', {
          get: fileInputValueGet,
          set: fileInputValueSet
        });
    });

    it('upload file when click on upload button', async() => {
        fileInputValue = 'myimage.png';
        fileInputFilesGet.mockReturnValue([fileFixture]);

        await act(async () => {
            fireEvent.click(uploadButton);
        });

        ....
    });