Debugging Jest with Chrome stops in Jest but not on test debugger statement, how to make it stop in the test?

Question

I've gotten Jest debugging up and running many times. For some reason in this repo (that I'm new to) the debugger will stop in jest.js:

but won't stop in the test itself. The test:

  it('opens the drawer and presses the reset button', async () => {
    debugger; // never stops here 
    console.log('test should have stopped');

The command I'm running:

✗ node --inspect-brk node_modules/.bin/jest --runInBand -t 'opens the drawer and presses the reset button'
Debugger listening on ws://127.0.0.1:9229/3bb1a020-5ad6-42d5-b485-df8ab89db21b
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
 PASS  src/components/views/RecommendationPage/FilterDrawer/FilterDrawer.spec.tsx (12.355 s)
  ● Console

    console.log
      test should have stopped

      at _callee3$ (src/components/views/RecommendationPage/FilterDrawer/FilterDrawer.spec.tsx:217:13)

So the test is definitely running and the console.log is running but the debugger won't stop on the debugger statement. I've done this more than a few times, it definitely can be done. But something is up with the Jest config in this repo.

My best guess is that the debugger statement is being stripped out somehow. Here's my jest.config.js:

module.exports = {
  preset: 'jest-expo',
  clearMocks: true,
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  transform: {
    '\\.(js|jsx)': 'babel-jest',
  },
  roots: ['<rootDir>/__mocks__', '<rootDir>/src'],
  transformIgnorePatterns: [
    'node_modules/@expo/vector-icons/.*\\.json',
    'node_modules/react-native/.*\\.json',
    'node_modules/(?!((jest-)?@react-native|react-native|expo-camera|react-native-adapter|react-clone-referenced-element|expo(nent)?|@expo(nent)?/.*|react-native-vector-icons|react-native-vector-icons/.*|react-navigation|react-navigation-redux-helpers|@react-navigation/.*|unimodules-permissions-interface|@expo/vector-icons/.*|@unimodules|@unimodules/.*|jest-expo/.*|@sentry/.*|sentry-expo|native-base|victory-*|ol))',
  ],
  moduleNameMapper: {
    'lang/.*\\.json': '<rootDir>/__mocks__/EmptyI18nResource',
  },
  setupFilesAfterEnv: ['./jest.setup.ts', './setupTests.js'],
  watchPathIgnorePatterns: ['<rootDir>/node_modules'],
};

This is a hybrid React Native app.

There's something that's stopping the debugger from stopping on that debugger line but the console.log after it is definitely being hit.

I also cloned a boilerplate TS React repo and tried debugging the test in that repo. It stopped on the debugger with no issue.

What am I missing?

Answer 1

Not really an answer but I want to share what ended up working: I did the debugging with Webstorm. Worked on the first try after following the Jest / Webstorm debugging guide. I set a breakpoint in the test, started the debugging in Webstorm and voila it hit the breakpoint.