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: 

...