How to debug jest test cases(React)?

Adding test cases to your code always helps in the long run, today we’re going to talk about how to debug test cases.

Do something today that your future self will thank you for

1. Using our all-time favorite Console.log

    it('should call touch & asyncValidate methods', () => {
         const component = shallow(
           <TrialRegistrationForm handleSubmit={mockHandleSubmit} pristine />,
         );
   
         const mockFunction = jest.fn();
         console.log(mockFunction);
         component.instance().touchAndAsyncValidate('test', '1');
   
         expect(mockFunction).toBeCalledWith('test');
       });

   Using the debug() method of the wrapper with console.log

   const component = shallow(<MyComponent />);
   console.log(component.debug());

2. Using the Jest recommend way by using node
   1. 1. Add debugger; where we want to break our test case
      2. Run the command in terminal

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

         Debugger listening on ws://127.0.0.1:9229/c5ce34bb-64f3-4a59-8246-e21168ba8e26
         For help see https://nodejs.org/en/docs/inspector

      3. Open the link in chrome chrome://inspect
      4. Click on Open Dedicated DevTools for Node
      5. Our script will break at the debugger