Testing functions containing Promise and FileReader() in Jest

Currently trying to test the following function:

const readFileAsync = (file, use = false) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    if (use) reader.readAsDataURL(file);
    else reader.readAsArrayBuffer(file);
  });

export default readFileAsync;

But having massive issues with the FileReader aspect in regards to mocking. Any advice?

Although we mock FileReader onload method, after executing readFileAsync method, reader.onload is to assign to an anonymous function (not mocked). So we need to expose the reader instance, get the reader instance in the test case and execute reader.onload method manually. Then, the promise will be resolved with the mocked value of reader.result.

E.g.
index.ts:

const readFileAsync = (file, use = false) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    if (use) reader.readAsDataURL(file);
    else reader.readAsArrayBuffer(file);
    (readFileAsync as any)._reader = reader;
  });

export default readFileAsync;

Expose the reader instance according to (readFileAsync as any)._reader.

index.test.ts:

import readFileAsync from './';

const mFileReader = jest.fn(() => {
  return {
    readAsDataURL: jest.fn(),
    readAsArrayBuffer: jest.fn(),
  };
});

(global as any).FileReader = mFileReader;

describe('59581721', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });
  afterAll(() => {
    jest.restoreAllMocks();
  });
  it('should read as data url correctly', async () => {
    const blob = new Blob(['a']);
    const pending = readFileAsync(blob, true);
    const mReader = (readFileAsync as any)._reader;
    mReader.result = 'mocked result';
    mReader.onload();
    const actual = await pending;
    expect(actual).toBe('mocked result');
    expect(mReader.readAsDataURL).toBeCalledWith(blob);
  });

  it('should read as array buffer corectly', async () => {
    const blob = new Blob(['a']);
    const pending = readFileAsync(blob);
    const mReader = (readFileAsync as any)._reader;
    mReader.result = 'mocked result';
    mReader.onload();
    const actual = await pending;
    expect(actual).toBe('mocked result');
    expect(mReader.readAsArrayBuffer).toBeCalledWith(blob);
  });
});

Unit test result with coverage report:

 PASS  src/stackoverflow/59581721/index.test.ts (13.673s)
  59581721
    ✓ should read as data url correctly (21ms)
    ✓ should read as array buffer corectly (2ms)

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

My testing environment is node.

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59581721