Jest Unit Testing Tips

Unit Testing Promises

Some tips for testing promises:

1. Use expect.assertions(1) to ensure that the assertion inside your then() or catch() was called.  This ensures that if your test is coded for then(), for example, it won't mistakenly pass if it is never called.  Example code for expect.assertions(1).
2. Return the promise in the test.  If you do not, a failed assertion in your then() or catch() will not actually fail the test.  Example code for returned promise. 
3. Here is example code for mocking a resolved promise (and a rejected promise example). 

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.

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.