Page Comparison

...

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

2. From your project directory, run the following:

   Code Block
   language bash
   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: 

...

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.