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: 

...

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' };

...