How to use checkForCommonEnvironmentErrors method in Jest

I'm writing this answer to help others with the prob but the source is @bergi's comment above. You need to use await with expect(action()).rejects.toThrowError(). This will look like:

  it(`Should throw an error when bad things happen`, async () => {
    const result = doThing()
    await expect(result).rejects.toThrowError(`oh no`);
  });

In regards to the OP's follow up question:

expect(received).rejects.toEqual() -- Received promise resolved instead of rejected -- Resolved to value: undefined

That's a separate issue - as Jest says, the function you're expecting to throw is returning undefined rather than throwing an error. You should add something like throw new Error('oh no') to the code you're calling (though again that's a separate question).

scrollBy is called on the first result of getElementById, and getBoundingClientRect is called on the second result of getElementById so you'll need to include both functions on the object you are returning in the mock.

Here is a working example to get you started:

import * as React from 'react';
import { mount } from 'enzyme';

class MyClass extends React.Component {
  handleClick() {
    document.getElementById('first-id').scrollBy(document.getElementById('second-id').getBoundingClientRect().width, 0);
  }

  render() {
    return (
      <button className="my-button" onClick={this.handleClick}>scroll</button>
    );
  }
}

it('calls scrollBy with correct params', () => {
  const props = {};
  const myClassWrapper = mount(<MyClass {...props} />);
  const scrollBySpy = jest.fn();
  const getBoundingClientRectSpy = jest.fn(() => ({ width: 100 }));
  global.document.getElementById = jest.fn(() => ({
    scrollBy: scrollBySpy,
    getBoundingClientRect: getBoundingClientRectSpy  // <= add getBoundingClientRect
  }));

  myClassWrapper.find('.my-button').simulate('click');
  expect(scrollBySpy).toHaveBeenCalledWith(100, 0);  // Success!
});

You can use jest.spyOn(object, methodName, accessType?) to spy on readAsBinaryString method of FileReader. readAsBinaryString is an instance method, not static method of FileReader constructor. Besides, the return value of readAsBinaryString is void. So you can't mock a return value.

E.g.

index.ts:

export function main() {
  const fr = new FileReader();
  const blob = new Blob();
  fr.readAsBinaryString(blob);
}

index.spec.ts, we need spy on FileReader.prototype.readAsBinaryString, since it's an instance method.

import { main } from './';

describe('main', () => {
  test('should mock FileReader', () => {
    const readAsBinaryStringSpy = jest.spyOn(FileReader.prototype, 'readAsBinaryString');
    main();
    expect(readAsBinaryStringSpy).toBeCalledWith(new Blob());
  });
});

Unit test result with 100% coverage:

PASS  src/stackoverflow/58644737/index.spec.ts
  main
    ✓ should mock FileReader (10ms)

----------|----------|----------|----------|----------|-------------------|
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:       1 passed, 1 total
Snapshots:   0 total
Time:        4.852s, estimated 9s

Update

index.ts:

export class Component {
  object = {
    image: ''
  };
  handleFileUpload(event) {
    let reader = new FileReader();
    let file = event.target.files[0];

    reader.readAsBinaryString(file);

    reader.onload = () => {
      let base64String = btoa(reader.result as string);
      this.object.image = base64String;
    };

    return reader;
  }
}

index.spec.ts:

import { Component } from './';

const cmp = new Component();

describe('main', () => {
  beforeEach(() => {
    jest.restoreAllMocks();
  });
  test('should test handle file upload correctly', () => {
    const mFile = new File(['go'], 'go.pdf');
    const mEvent = { target: { files: [mFile] } };
    const readAsBinaryStringSpy = jest.spyOn(FileReader.prototype, 'readAsBinaryString');
    const btoaSpy = jest.spyOn(window, 'btoa');
    const reader = cmp.handleFileUpload(mEvent);
    expect(reader).toBeInstanceOf(FileReader);
    if (reader.onload) {
      Object.defineProperty(reader, 'result', { value: 'gogo' });
      const mOnloadEvent = {} as any;
      reader.onload(mOnloadEvent);
      expect(btoaSpy).toBeCalledWith('gogo');
      expect(cmp.object.image).toBe(btoa('gogo'));
    }
    expect(readAsBinaryStringSpy).toBeCalledWith(mFile);
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/58644737/index.spec.ts (7.328s)
  main
    ✓ should test handle file upload correctly (13ms)

----------|----------|----------|----------|----------|-------------------|
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:       1 passed, 1 total
Snapshots:   0 total
Time:        8.78s

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

When testing asynchronous code, you need to return the promise from the test. Change the test body to:

return someFunctionThatReturnsAPromise()
  .then(() => {
    expect(true).toBeFalsy();
  });

With that, the test fails as expected:

FAIL  __tests__/Async.test.js
 ● Asynchronous Code › should execute promise

   expect(received).toBeFalsy()

   Expected value to be falsy, instead received
     true

This is the pattern facebook uses for testing async code with jest.

A quick search into inputmask repository shows that it uses customElements which is a feature implemented by modern browsers in order to create native web components (without a framework).

When looking at Jest documentation we can see that the default testEnvironment is jsdom, which is an implementation of the DOM that runs without a browser. This library implements custom elements since version 16.2.0 and this version is pretty recent, and is not yet used by jest (the last version of jest uses jsdom v15.1.1).

So you just have to wait for jest to update the jsdom dependency, and then update your project to use the latest version of jest.

Another option: you can use jest-browser which runs Jest in a headless browser based on puppeteer.

Update 05-2020:

Upgrade to (at least) Jest 26.0.0 which uses jsdom 16.2.0 (Source)

Figured it out quickly... I just needed to create a fakeEvent with a fake preventDefault function and pass it along:

describe('User signin', () => {
    it('should fail if no credentials are provided', () => {
        const fakeEvent = { preventDefault: () => console.log('preventDefault') };
        const loginComponent = shallow(<Login />);
        expect(loginComponent.find('.form-login').length).toBe(1);
        loginComponent.find('.form-login').simulate('submit', fakeEvent);
        expect(loginComponent.find(Notification).length).toBe(1);
    });
});

I add "smartStep": true to launch.json and debugging the await/async pattern works as desired (using Node v8.4.0).

This is my launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/src/main.ts",
      "cwd": "${workspaceRoot}",
      "console": "integratedTerminal",
      "outFiles": [ "${workspaceRoot}/dist/*.js" ],
      "sourceMaps": true,
      "preLaunchTask": "build",
      "smartStep": true
    }
  ]

}

For more details see https://code.visualstudio.com/updates/vApril#_smart-code-stepping.

It's not a perfect solution, because with smartStep you are not able to debug into library code, so you have manually to comment out this option if you want to debug into library. Maybe someone knows how to solve this minor inconvenience.

First search in path.dirname(process.mainModule.filename) then go up the directory tree ../, ../../, ../../../ and so on until you find the configuration file.

Here is the code I use stolen from rc (https://github.com/dominictarr/rc) package, it will read and json parse configuration from a file named .projectrc:

const fs = require('fs');
const path = require('path');

// Utils shamefully stolen from
// https://github.com/dominictarr/rc/blob/master/lib/utils.js

find(...args) {
  const rel = path.join.apply(null, [].slice.call(args));
  return findStartingWith(path.dirname(process.mainModule.filename), rel);
}

findStartingWith(start, rel) {
  const file = path.join(start, rel);
  try {
    fs.statSync(file);
    return file;
  } catch (err) {
    // They are equal for root dir
    if (path.dirname(start) !== start) {
      return findStartingWith(path.dirname(start), rel);
    }
  }
}

parse(content) {
  if (/^\s*{/.test(content)) {
    return JSON.parse(content);
  }
  return undefined;
}

file(...args) {
  const nonNullArgs = [].slice.call(args).filter(arg => arg != null);

  // path.join breaks if it's a not a string, so just skip this.
  for (let i = 0; i < nonNullArgs.length; i++) {
    if (typeof nonNullArgs[i] !== 'string') {
      return;
    }
  }

  const file = path.join.apply(null, nonNullArgs);
  try {
    return fs.readFileSync(file, 'utf-8');
  } catch (err) {
    return undefined;
  }
}

json(...args) {
  const content = file.apply(null, args);
  return content ? parse(content) : null;
}

// Find the rc file path
const rcPath = find('.projectrc');
// Or
// const rcPath = find('/.config', '.projectrc');

// Read the contents as json
const rcObject = json(rcPath);
console.log(rcObject);

You can also use the rc package as a dependency npm i rc, then in your code:

var configuration = require('rc')(appname, {
  // Default configuration goes here
  port: 2468
});

This will read config from a file named .${appname}rc.

According to Jest-Platform document, you can use jest-diff to get a "pretty-printed" string illustrating the difference between the two arguments.

Your message function will become:

const { diff } = require('jest-diff'); // already available if Jest is installed

// ...

message: () => "expect(received).toTorgle(expected):" + diff(expected, received),

By default, the first argument to diff() is labelled Expected and the second is labelled Received. This can be changed by supplying Options as a third argument. See the Options documentation.