Closed adamski52 closed 3 years ago
hey @adamski52 thx for reporting
is this only happening for DEBUG or also for RUN?
@firsttris hello. Also for Run. If there's any more info I can get to help please let me know.
@firsttris I apologize -- I thought I had used this extension prior to reinstalling Windows, but apparently I never did, so my expectation that it work in the way I expected was a bad expectation.
The above conditions are still true, but my expectation that it work without a launch.json is probably wrong since I was using a different extension for which that was true, and I confused the two. The errors are to do with it not transpiling from TypeScript to JavaScript (via Babel, or whatever) so maybe there's an option I could have added to the config to address that.
So, maybe the above is still a defect but more likely is that it's addressed by following the setup steps listed for CRA applications? The confusion/reason for opening this was because I did not have to do that with my application before, because I was using a different extension, I guess.
Hey there :wave:
I had the same issue but only when running debug
for a React application
And my vscode config for jest-runner
:
"jestrunner.jestCommand": "yarn run react-scripts test",
"jestrunner.enableYarnPnpSupport": true,
"jestrunner.detectYarnPnpJestBin": true`
After looking at the command used by the extension, I realized that when clicking run
, the command was:
yarn run react-scripts test 'PATH_TO_TEST_FILE' -t 'TEST_FILE'
while the command for the debug
was:
cd PROJECT_PATH ; /usr/bin/env 'NODE_OPTIONS=--require /usr/share/code/resources/app/extensions/ms-vscode.js-debug/src/bootloader.bundle.js --inspect-publish-uid=http' 'VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"/tmp/node-cdp.498108-5.sock","deferredMode":false,"waitForDebugger":"","execPath":"/usr/bin/node","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"/tmp/node-debug-callback-f4c221c143caa000"}' /usr/bin/node --require PROJECT_PATH/.pnp.js "`yarn bin jest`" PATH_TO_TEST_FILE -t "TEST_FILE" --runInBand
run
, the extension works fine because it used react-scripts test
and therefore the create-react-app jest & babel configsdebug
, the extension uses `yarn bin jest`
and not react-scripts test
. Since jest uses babel to transpile the typescript (doc) and the react (doc), it will fail because there is (theoretically) no babel.config.js
file in a create-react-app repo.I have a temporary fix:
babel-preset-react-app
to my dev environment (yarn add --dev babel-preset-react-app
)babel.config.js
:
// babel.config.js
module.exports = {
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
"babel-preset-react-app",
],
};
debug
and now its working just fine :ok_hand:thx for the summary @Dot-H i included a link to your findings into the readme.
If anybody else comes across this, here's what works in our project. We have a script to generate the same jest.config.js
file that's used under the covers of CRA:
// tests/debug/setup.js
const { writeFileSync } = require("fs");
const { resolve } = require("path");
const createJestConfig = require("react-scripts/scripts/utils/createJestConfig");
// Add jest.config.js file based on CRA scripts
const rootDir = resolve(__dirname, "../..");
const jestConfigFile = resolve(rootDir, "jest.config.js");
const jestConfig = createJestConfig(
(relPath) => resolve(rootDir, "node_modules/react-scripts", relPath),
rootDir,
false
);
writeFileSync(
jestConfigFile,
`// autogenerated file for test debugging purposes only\nmodule.exports = ${JSON.stringify(
jestConfig
)}`
);
In your VSCode settings.json
, all that's needed is this:
{
"jestrunner.jestCommand": "npm run test --"
}
Run node tests/debug/setup.js
to generate the config file (you may want to put it in .gitignore
)
For us, with this setup, both run
and debug
buttons in VSCode work as expected
@Dot-H I did as you wrote https://github.com/firsttris/vscode-jest-runner/issues/136#issuecomment-769707833 and Jet Runner started working for me, but only with TS. When I want to test tests with TS extensions, an error appears:
It looks like after adding babel.config.js import settings are broken for other types of file extensions, for example css modules.
To configure the import, I use react-app-env.d.ts
//react-app-env.d.ts
/// <reference types="react-scripts" />
Hope this helps some, I got debug to work for CRA in vscode by doing the following: https://github.com/firsttris/vscode-jest-runner/issues/315
I'm running a brand new Windows install -- no global NPM installs, no dangling configurations -- brand new, unadulterated setup. I get an error from Babel when running Jest Runner against an untouched CRA Typescript application.
Steps to reproduce:
npx create-react-app demo --template typescript
npm test
and see that the tests passApp.test.tsx
as shown below and use Jest Runner's "Debug" option:Expected Result: Breakpoint is hit, test passes if I continue
Actual Result:
The above happens with or without adding the following from the Jest Runner extension page to
settings.json
in VSCode:(including both, or one or the other -- all 3 fail in the same way)
What's worse is that prior to re-installing Windows, I had this working without any extra VSCode configurations that I'm aware of. Certainly no .vscode/whatever.json files for the project though there may have been something applied globally that I do not recall.
Really what I'm trying to do is just use VSCode Jest Runner on a typescript CRA application. All documentation I've found has resulted in some form of error like the above. Doing what the error says does not move the ball. The specific error about adding to the babelrc because there is no babelrc in an untouched CRA application.
Though I know the two projects are not related, it's maybe worth noting that the "Jest" extension runs all tests and they pass within VSCode. I like Jest Runner because of the elegant Debugging though.