Jest Unit Testing Tips

Unit Testing with Promises

Testing that a Promise is resolved

// Remember to use the 'async', 'await', and 'expect' below.
it('tests that someMethodThatReturnsAPromise rejects with an error', async () => { 
  // first, set up data such that the promise should be resolved
  // second, call the method
  await expect(someMethodThatReturnsAPromise()).resolves.toBe(undefined);
});

Testing that a Promise is rejected

// Remember to use the 'async', 'await', and 'expect' below.
it('tests that someMethodThatReturnsAPromise rejects with an error', async () => { 
  // first, set up data such that the promise should be rejected
  // second, call the method  
  await expect(someMethodThatReturnsAPromise()).rejects
    .toThrow(new Error('The error sent to the reject.'));
});

Mock that a Promise was resolved

jest.spyOn(object, 'methodWithPromise').mockResolvedValue(undefined);

Mock that a Promise was rejected

jest.spyOn(object, 'methodWithPromise').mockRejectedValue(new Error('test'));

Mocking Top-level Objects (e.g. document)

jest.spyOn(global.document, 'referrer', 'get').mockReturnValue(loginUrl);

Unit Test Debugging

1. add the line debugger; to your code where you want a breakpoint.

2. From your project directory, run the following:

   node --inspect-brk node_modules/.bin/jest --runInBand

3. Open chrome browser, and navigate to chrome://inspect and click the device.
4. You may need to click Play to get to your debugger line.

To debug unit tests from inside WebStorm (or PyCharm)

1. In Run->Edit Configurations, go to "Edit Configuration templates...", select Jest and set Jest options: --env=jsdom 
2. Set breakpoints in the test file, and/or in the JSX by clicking in the gutter to the left of the code you wish to inspect
3. Right click on a file and choose "Debug <FileName>, or click on the run icon in the gutter in the Jest file to run a specific test.

Mocking Static Files

Jest has documentation on how to test if dealing with static files in your component. A common use case is likely needing to mock a file, such as the edX logo in the header. To handle this, in the top level of your app, add a folder titled __mocks__/ and a file titled fileMock.js . Inside the file, you will want something like: 

module.exports = 'edx-sm.png';

This will enable your test to handle the missing file. Happy testing!

Testing with Snapshots

Some tips for testing with snapshots:

1. If you want to test an error state of a missing prop using a snapshot, you should pass in prop={null} rather than omitting it from the component being tested. When omitted, the component will use the default state set, which is potentially not desired.
2. If you change the name of a test in the it(...) function, the old snapshot of that test with the old name will still live in the snapshot file. I think the best alternative is to just delete the snapshot and recreate it with the new tests (once you confirm that you want the updated snapshots and don't accidentally override anything).
3. To ensure the correct components are being rendered as part of your snapshot, do a search in the .snap file for the name of your test and the expected component underneath it. It's easy to miss an error message not showing up, but if you search the snapshot for the error message or error component, you can confirm it is being rendered.

Testing Cookies with universal-cookie (Mocking Default Exports)

// At the top of your test file:
import Cookies from 'universal-cookie';
jest.mock('universal-cookie', () => {
 class MockCookies {
   static result = {};
   get() {
     return MockCookies.result;
   }
 }
 return MockCookies;
});

// In your test itself:
Cookies.result = { my: 'cookie_value' };

// Code under test:
const cookie = new Cookies.get('whatever');
// cookie will be { my: 'cookie_value' };

This also doubles as a way to mock default exports.