Struggling to debug Jest tests in VSCode with Next JS (Typescript)

So I'm trying to set breakpoints on my Jest tests, but because some of them are Async (in particular my beforeEach and beforeAll functions) for some reason the debugger gets caught on them and then clicking the step over button simply takes me further into these node internal files.

I've tried to set the skipFiles directive in the launch.json, but unfortunately I still can't get it to work. This is when I'm debugging my database connection, rather than my Next.js app overall. At any rate, if anyone has any suggestions that would be appreciated.

My guess is that the problems are caused by not having set up Typescript properly (even though I followed the Next docs), Babel or Jest.

Here are my launch json, my jest.config.js, my tsconfig and my babelrc:

// launch.json

 {
  "type": "node",
  "request": "attach",
  "name": "Attach to application",
  "skipFiles": ["<node_internals>/**"],
  "port": 9229
}

// jest.config.js

module.exports = {
  collectCoverageFrom: [
    "**/*.{js,jsx,ts,tsx}",
    "!**/*.d.ts",
    "!**/node_modules/**",
  ],
  moduleNameMapper: {
    // Handle CSS imports (with CSS modules)
    // https://jestjs.io/docs/webpack#mocking-css-modules
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",

    // Handle CSS imports (without CSS modules)
    "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",

    // Handle image imports
    // https://jestjs.io/docs/webpack#handling-static-assets
    "^.+\\.(jpg|jpeg|png|gif|webp|svg)$": `<rootDir>/__mocks__/fileMock.js`,
  },
  testPathIgnorePatterns: [
    "<rootDir>/node_modules/",
    "<rootDir>/.next/",
    "<rootDir>/__tests__/__utils__/",
  ],
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
  },
  transformIgnorePatterns: [
    "/node_modules/",
    "^.+\\.module\\.(css|sass|scss)$",
  ],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    "^@api/(.*)$": "<rootDir>/pages/api/$1",
  },
  modulePaths: ["<rootDir>/"],
};

//tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "@api/*": ["pages/api/*"]
    },
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
  ],
  "exclude": ["node_modules"]
}

and my babelrc:

{
  "presets": ["next/babel", "@babel/env"]
}

Many thanks in advance to anyone who can offer any suggestions.