如何測試創建文件的實用程序功能

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