Question

我正在尝试使用Jest和Enzyme测试一个小的实用程序功能。我无处可去。

function downloadCSV(csv: string, filename: string) {
  let csvFile;
  let downloadLink;

  csvFile = new Blob([csv], { type: 'text/csv' });
  downloadLink = document.createElement('a');
  downloadLink.download = filename;
  downloadLink.href =window.URL.createObjectURL(csvFile);
  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);
  downloadLink.click();
}

到目前为止我的测试：

import downloadCSV from './downloadCSV';
let myReader = new FileReader();

describe('downloadCSV utility', () => {

  it('should create a file of CSV type', () => {
    window.URL.createObjectURL = jest.fn();
    const actual = downloadCSV('foo,bar', 'my-filename');
    console.log(myReader.readAsText(actual));  // logs undefined
  });

Answer 1

这是解决方案，它与reactjs和enzyme无关。您只能使用jestjs

来测试此功能

downloadCSV.ts：

export function downloadCSV(csv: string, filename: string) {
  let csvFile;
  let downloadLink;

  csvFile = new Blob([csv], { type: 'text/csv' });
  downloadLink = document.createElement('a');
  downloadLink.download = filename;
  downloadLink.href = window.URL.createObjectURL(csvFile);
  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);
  downloadLink.click();
}

downloadCSV.spec.ts：

import { downloadCSV } from './downloadCSV';

(global as any).Blob = jest.fn();
window.URL.createObjectURL = jest.fn();

describe('downloadCSV', () => {
  const csv = 'csv';
  const filename = 'filename';

  it('should create a file of CSV type', () => {
    (global as any).Blob.mockReturnValueOnce('mocked blob');
    const anchorMocked = { href: '', click: jest.fn(), download: '', style: { display: '' } } as any;
    const createElementSpyOn = jest.spyOn(document, 'createElement').mockReturnValueOnce(anchorMocked);
    document.body.appendChild = jest.fn();
    (window.URL.createObjectURL as jest.MockedFunction<typeof window.URL.createObjectURL>).mockReturnValueOnce(
      'https://github.com/mrdulin'
    );

    downloadCSV(csv, filename);

    expect(createElementSpyOn).toBeCalledWith('a');
    expect(document.body.appendChild).toBeCalledWith(anchorMocked);
    expect(anchorMocked.click).toBeCalledTimes(1);
    expect(anchorMocked.href).toBe('https://github.com/mrdulin');
    expect(anchorMocked.download).toBe('filename');
    expect(anchorMocked.style.display).toBe('none');
  });
});

覆盖率100％的单元测试结果：

PASS  src/stackoverflow/57810999/downloadCSV.spec.ts
  downloadCSV
    ✓ should create a file of CSV type (7ms)

----------------|----------|----------|----------|----------|-------------------|
File            |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files       |      100 |      100 |      100 |      100 |                   |
 downloadCSV.ts |      100 |      100 |      100 |      100 |                   |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.161s

以下是完整的演示：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57810999

如何测试创建文件的实用程序功能

1 个答案: