Jest - Debug usage with WebStorm

[Vadorequest]

Webstorm natively supports debugging tests (single test, multiple tests, whole file) with jest. But since this plugin requires to invoke tests using serverless-bundle script, it's somewhat incompatible with WebStorm's native way of running tests and results with "Jest encountered an unexpected token" because it can't understand ES6 import/export (it's not running jest through webpack/babel)

What's the recommended way to configure WebStorm with serverless-bundle? Or is there any known workaround? (I believe it's possible to configure webstorm to run tests through serverless-bundle, but haven't figured out how yet)

[jayair]

Oh that's interesting. We use a similar approach to Create React App. Do you have any experience with using WebStorm with Create React App?

[Vadorequest]

I don't, but looking at my code I see I use react-app-rewired, which does also something quite similar, see:

• https://github.com/timarney/react-app-rewired/blob/master/scripts/test.js
• https://github.com/timarney/react-app-rewired/blob/master/bin/index.js

[jayair]

If they are doing something similar then it might be related to this issue - https://github.com/AnomalyInnovations/serverless-bundle/issues/4. Maybe all the arguments are not being passed in.

Once we fix that, let's give this a try again.

[patrykkrawczyk]

any progress on this? running tests with serverless-bundle test in terminal seems medieval

[jayair]

@patrykkrawczyk Not right now. I'm not a WebStorm user, so I need some help with this.

[markisadesignerd]

@Vadorequest, @patrykkrawczyk: The way I worked around this was to:

1. Add [email protected] as a devDependency to my own project's package.json (optional I think, but otherwise WebStorm wouldn't display the inline test/debug icon in the editor)
2. Create a jest.config.js file in your project's root that loads the serverless-bundle config:

// jest.config.js
const path = require('path');
const createJestConfig = require('serverless-bundle/scripts/config/createJestConfig');
const relativePath = (relativePath) => path.resolve(__dirname, 'node_modules/serverless-bundle', relativePath);
module.exports = createJestConfig(relativePath, __dirname);

3. Update your Jest Run/Debug configuration to use the Configuration file from step 2 and the Jest package from serverless-bundle, e.g.: {your-project-root}/node_modules/serverless-bundle/node_modules/jest

That seemed to do the trick for me.

[rmjwilbur]

Thanks @markisadesignerd - that worked for me in IntelliJ

I had to remove "type": "module" from my package.json but I can live with that. Also I am pointed to my project's node_modules/jest folder.

[jayair]

@markisadesignerd Thank you for this! I'll link to this in the README.

[renanwilliam]

This works fine but I have a problem with debugging not stepping over (only stops on break-points). It's usable but no ideal.

Any lights?