add support to webstorme
Closed this issue · 40 comments
webStorm support native jest
but when I run yarn test, I see all the tests in the terminal.
Is there any way to integrate the testing with webStorm?
it's much more convenient to use the webStorm Gui to see the errors
This new run configuration for Jest can only run Jest directly. In create-react-app, unfortunately for WebStorm, Jest is run via a wrapper script react-scripts/scripts/test.js. If it were possible to do the same but with running jest with some environment variables, configs and CLI options, that would help us.
Specifying the path to test.js instead of the path to Jest in the run configuration is also not an option: WebStorm builds up the path from node_modules/jest to .bin/jest itself.
Is there any reason WebStorm can't recognize react-scripts test as another way to run Jest? We're not going to change Jest to anything else so it should be safe to extend integration to support that. Or are there other technical challenges here?
At this specific moment it's implemented the way that it can only recognize and run Jest itself.
Today we tested whether we can run react-scripts test instead, but it didn't work: react-scripts test passes a config to Jest and so does WebStorm; with 2 --config flags everything breaks.
That will be fixed, when we transition to jest-editor-support. We don't have ETA for that, may be some time later this year.
There's aslo a bunch of other concerns:
- is debugging tests possible with create-react-app?
- is it possible to run a single test?
Thanks for looking into it. What config options does WebStorm need to pass? We could merge them on our side.
That will be fixed, when we transition to jest-editor-support. We don't have ETA for that, may be some time later this year.
Sounds like a plan. 👍
is debugging tests possible with create-react-app?
I actually don't know. I haven't looked into Node debugging for a while because Jest was waiting for some Node bugfix which I don't know whether it landed or not. But if Jest supports it, so should we.
is it possible to run a single test?
react-scripts test TestName should probably work, although it'll run in watch mode. If you want to disable watch mode, you can set CI environment variable to true.
What config options does WebStorm need to pass?
Since currently WebStorm integrates with jest via --setupTestFrameworkScriptFile, it needs to disable transforming it using transformIgnorePatterns. It is done by passing whole jest configuration as --config=<JSON>, e.g.:
--config '{"rootDir":"/path/to/project-root","transformIgnorePatterns":["/node_modules/","^/home/segrey/programs/webstorms/WebStorm-171.3780.79/plugins/JavaScriptLanguage/helpers"]}'
In case of create-react-app, where no external jest configuration is expected, only these two JSON keys will be passed.
I tried to run with jest webstorm, but I am getting this errors, what should I DO?
And this is my Edit configurations settings
@shai32 please see my comment above - it's not possible to use WebStorm Jest run/debug configuration to run tests in the app created with creat-react-app. Please follow this issue for updates.
@shai32 use the command line directly - there's an integrated terminal in the IDE.
+1
Ah, it turned out there is no need to disable transforming/mocking IDE sources using transformIgnorePatterns and unmockedModulePathPatterns for create-react-app projects. Therefore this issue can be fixed on IDE side. Fix will be available in WebStorm 2017.1.2, planned in a few weeks (no strict ETA). This issue can be closed now.
Thanks @segrey
@segrey
after WebStorm 2017.1.2 will be released, How do I configure webStorm to run client tests?
maybe we need to add these to the docs
@shai32 add the Jest entry point as a node debug config
@shai32 Just as normal Jest run configuration, only specify react-scripts package instead of jest package in "Jest package" field.
So WebStorm 2017.1.2 is out, so I added a configuration to run my tests.
Its seems to work (Thanks WebStorm devs !!) but there is still some problems:
This works:
But when I Moved global.a to setupTests.js its fails (console.log doesn't print on console as well)
It seems that setupTests isn't been run before each test, because all my test depends on setupTests.js, I can run any test.
notice that in terminal the same test is passes
also adding import '../../setupTests' in the test file will make it work in WebStorm also.
so the issue is that in WebStorm, setupTests.js does not run before each test.
Is it letting you debug in webstorme?
@quantuminformation: yes it let me debug
@segrey yes it does run in terminal, and it passes.
2017.2 Doesn't work for me:
/Users/nikos/.nvm/versions/node/v7.8.0/bin/node --harmony /Users/nikos/WebstormProjects/Javascript-code-generation-tools/node_modules/jest-cli/bin/jest.js --runInBand
FAIL src/features/editor/Editor.test.js
● Test suite failed to run
/Users/nikos/WebstormProjects/Javascript-code-generation-tools/src/features/editor/Editor.test.js: Unexpected token (11:9)
9 | it('renders code controls without crashing', () => {
10 | const div = document.createElement('div');
> 11 | shallow(<Editor />, div);
| ^
12 | });
13 |
14 |
FAIL src/reducers/jsonCodeTools.test.js
● Test suite failed to run
/Users/nikos/WebstormProjects/Javascript-code-generation-tools/src/reducers/jsonCodeTools.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import jsonCodeTools from './jsonCodeTools';
^^^^^^
SyntaxError: Unexpected token import
at transformAndBuildScript (node_modules/jest-cli/node_modules/jest-runtime/build/transform.js:320:12)
at process._tickCallback (internal/process/next_tick.js:109:7)
FAIL src/features/codeControls/CodeControls.test.jsx
● Test suite failed to run
/Users/nikos/WebstormProjects/Javascript-code-generation-tools/src/features/codeControls/CodeControls.test.jsx: Unexpected token (12:32)
10 | }
11 |
> 12 | const enzymeWrapper = shallow(<CodeControls {...props} />)
| ^
13 |
14 | return {
15 | props,
FAIL src/App.test.jsx
● Test suite failed to run
/Users/nikos/WebstormProjects/Javascript-code-generation-tools/src/App.test.jsx: Unexpected token (8:10)
6 | it('renders without crashing', () => {
7 | const div = document.createElement('div');
> 8 | shallow(<App />, div);
| ^
9 | });
10 |
Test Suites: 4 failed, 4 total
Tests: 0 total
Snapshots: 0 total
Time: 3.227s
Ran all test suites.
(node:54648) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
Process finished with exit code 1
@quantuminformation: did you set Jest Package to be react-scripts?
opps I was a node config, thx it works now.
@shai32 I couldn't reproduce the issue with setupTest.js (tried with setupFiles and setupTestFrameworkScriptFile). How is it configured in your project? Could you file a separate issue with details in the https://youtrack.jetbrains.com/issues/WEB?
@segrey so setupTest.js is actually running before your test?
can you stop on debug there?
can you see console.log printed in the terminal?
setupTest.js should be run without require it
it's working!
except one test for a function that uses fetch.
from npm test jest is running ok, but from the IDE it fails with fetch is not defined
@shai32 With configuration "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js", console.log are printed, it's possible to stop on debug, the test is passing and setupTest.js is run without require. I'd appreciate if you could provide details about your configuration in a separate issue. An example project reproducing your issue would be great.
@yonatanmn Sorry, not sure I can reproduce the problem from your description. Please file an issue in the https://youtrack.jetbrains.com/issues/WEB with an example project that allows to reproduce the issue. Thanks
@segrey how do I configure "setupTestFrameworkScriptFile": "/setupTests.js"?
should I Do it in edit configuration in WebStorm?
can u send a screenshot?
@shai32 If I understood correctly, your configuration works in terminal (outside IDE) and fails in IDE. This is a bug, but I can't reproduce it. Thus, I'd like to hear more input from you to be able to reproduce the issue. My configuration is simple:
// package.json
{
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/setupTests.js"
}
}@segrey it now works, when I run in terminal, there is no need to add "setupTestFrameworkScriptFile" to package.json.
but in IDE its needed, and it works if defined in pakcgae.json
@shai32 Thanks, I see. Unfortunately, I couldn't setup such a configuration that can be run in terminal successfully, but fails in IDE. Could you file an issue in https://youtrack.jetbrains.com/issues/WEB with details allowing to reproduce it? An example project would be just great.
@segrey I don't think it need any fix, it was a configuration issue.
If its important I can still add a bug details, how to I add in issue to youtrack,
Do I need to register before I can add an issue?
where to click to add an issue?
@shai32 You could be right as it depends on how configuration looks like. E.g. IDE needs configuration duplication if jests tests are running as a npm script, in this case all jest parameters specified in the script should be copied in "Jest options" field in Jest RC. Filing an issue makes sense If you are not OK with current behavior.
Yes, you need to register first (click "Log In..."). Once you're registered, there will be "Create Issue" button.
I am getting a warning, when debugging from IDE:
(node:60434) DeprecationWarning: node --debug is deprecated. Please use node --inspect instead.
This warning is caused by using old V8 debugger protocol (--debug-brk). New inspector protocol (--inspect) is not yet supported by jest (jestjs/jest#1652).
@shai32 Probably, it's worth to file a new issue to discuss a separate topic.
Yea, probably going to close this as it's unrelated.