Vscode-jest: Using with create-react-app typescript?

[qwerty2k]

Environment

1. node -v: 8.9.2
2. npm -v:

3. npm ls react-scripts (if you haven’t ejected): Yes (TypeScript)

4. Operating system: Windows

Steps to Reproduce

Create brand new project with cra: create-react-app my-app --scripts-version=react-scripts-ts . Apptest.tsx is:

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);

  expect(1).toBe(2);
});

Expected Behavior

Tests are detected and auto run with highlighting within vscode showing green or red if they pass or not.

Actual Behavior

I was under the impression (maybe wrongly) that the plugin should just auto work even with CRA typescript? instead the extension fails to find any tests in the output window and going into my tests i don't get any highlighting (as it hasn't found my tests).

Any help appreciated.

[seanpoulter]

It should work out of the box @qwerty2k. Let's investigate!
How'd you set up your workspace in VS Code?

[qwerty2k]

Hi Sean, thanks for offering to help! Not quite sure what you mean by setting up my workspace in vscode but hopefully the following information may help.

Im on Windows 7.

In vscode i have uninstalled all extensions apart from Jest. i created my project with create-react-app typescript:

create-react-app my-app --scripts-version=react-scripts-ts

Upon loading the project in the output window of vscode jest says:

No tests found
In c:\coding\my-app
  8 files checked.
  testMatch: **/__tests__/**/*.js?(x),**/?(*.)(spec|test).js?(x) - 0 matches
  testPathIgnorePatterns: \\node_modules\\ - 8 matches
Pattern: "" - 0 matches

Closed Jest
Starting watch mode
Closed Jest

Which i can understand as the testMatch is seemingly only looking for js and jsx when mine are tsx. If i run:

npm test then the following command is ran:
react-scripts-ts test --env=jsdom and that runs Jest successfully and detects all my tests, runs them and keeps it in watch mode.

If i view my .test.tsx file then i get no IDE indication that my tests have been detected (which i guess is as expected given the output window), if i change the file extension to .js then the little gren and red blobs appear so it would seem my tests are detected, they however still won't run as it doesn't seem to like any jsx in the files.

If you need any more information please let me know.

[seanpoulter]

Thanks for the extra detail. I'll create an app now.

Not quite sure what you mean by setting up my workspace in vscode

I meant which folder did you open in VS Code? The extension expects to find node_moules/ and can run into trouble if you open the folder that contains my-app.

[qwerty2k]

i opened the top level folder which contains the node_modules folder.

[seanpoulter]

Thanks for the info. I could reproduce that bug. When we decide how to run your tests we look for jest and react_scripts in node_modules. Since we find jest before react-scripts(-ts) we incorrectly start running tests with jest instead of the npm test script.

For now, your workaround would be to add a user setting in .vscode/settings.json:

{
    "jest.pathToJest": "npm.cmd test --"
}

[qwerty2k]

Sean, that's great thank you!

[stephtr]

I don't think that finding jest before react-script-ts is the problem. The problem is unique to using react-script-ts, projects with react-script work without problems.
In my opinion the error is within isBootstrappedWithCreateReactApp: On Windows it checks for the presence of: node_modules/.bin/react-scripts.cmd, node_modules/react-scripts/node_modules/.bin/jest.cmd, node_modules/react-native-scripts.cmd and node_modules/react-scripts-ts.cmd. Adding .cmd to the last two paths is definifely wrong as it should check the presence of a directory, not an executable. As npm and yarn also place executables without the .cmd extension into .bin do we even have to add .cmd?

[rrousselGit]

I'd like to point out that I'm using react-scripts-ts myself. And it works.
I even plugged react-app-rewired to have both JS and typescripts without ejecting ; and it still works.

On the other hand, I have still to make the 'debug' button to actually do something.
I get a Cannot find jest.js file!

[stephtr]

Is it possible that you are running on Linux or using an old version of npm?

[rrousselGit]

Is it possible that you are running on Linux or using an old version of npm?

No, I'm on windows with npm 5.5.1. Shouldn't be a problemn.

Especially considering I can debug using a custom launch.json :

    {
        "name": "Debug Jest tests",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin/react-app-rewired.cmd",
        "args": [
            "test",
            "--scripts-version",
            "react-scripts-ts",
            "--runInBand",
            "--env=jsdom",
            "--verbose",
            "--watch"
        ],
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
        "console": "integratedTerminal"
    }

(react-rewired app binded to react-scripts-ts)

[stephtr]

react-app-rewired needs react-scripts as peerDependency. As soon as react-scripts is installed, the default pathToJest will work fine.
In contrast to that react-scripts-ts is a separate package, which contains most of the code from react-scripts within itself but doesn't need/install it as a dependency.

[rrousselGit]

That's not entirely true. You don't need react-scripts as a dependency, simply an equivalent (react-scripts-ts for example) as long as you specify --scripts-version flag.

I don't have react-scripts in my node_modules nor did I specify pathToJest but the extension still works.

But I still can't use the 'debug' button.

[FDiskas]

You can test it using this repository https://github.com/nfq-eta/react-typescript
It's reproducible and this repository to :helicopter:

[stephtr]

This issue should be fixed by #266.

[stephtr]

I'm closing it since it got resolved with today's update.

[nickmccurdy]

This can be moved to the Done column of the board (you can also set up column automations to move closed issues to Done).

[seanpoulter]

Thanks Nick.

[JoshSchreuder]

@stephtr not sure if it's worth raising a new issue, but I'm getting this problem with the normal CRA which now supports TS builds out of the box. It's not picking up the inbuilt CRA configuration unless I use the pathToJest workaround as written above so I don't get the right testMatch pattern.

Let me know if you want me to raise a new bug on it.

[stephtr]

I just tested it creating a new project using npx create-react-app my-app --typescript, when opening this folder in VS Code, vscode-jest automatically ran the tests and displayed the results as expected. Could you try creating a new, empty project using that command and see whether you have the same issue with that?

[JoshSchreuder]

Yep no worries, I'll give it a go. FWIW I started off with a normal JS CRA project, then renamed my files to TS, so it's possible I'm missing some project level configuration (though CRA did create a whole bunch of TS stuff for me on my first build after detecting TS).

[JoshSchreuder]

@stephtr I worked out the culprit here.

I setup my project using the Visual Studio (IDE not Code) React template, which set my test script to be cross-env CI=true react-scripts test --env=jsdom.

The detection you guys are using for react-scripts expects it to be at the start of the command:
https://github.com/jest-community/vscode-jest/blob/master/src/helpers.ts#L36

If I change the script to just be react-scripts test the extension works. I'm not sure if you'd consider that a bug or not (maybe it should detect if react-scripts test is contained anywhere within the script text?) but I think I can just use the simpler script rather than what VS gave me by default.

[stephtr]

I'm not sure if you'd consider that a bug or not

Probably not really, since the automatic detection is just for convenience and not thought to support all possible different scenarios. I'm definitely not happy with the choice made by the VS template, since the idea behind react-scripts is to move all necessary parameters into that script, not the test command. (Additionally if you want to run npm test in your terminal, you probably don't want to have the CI env set.)
In principle one could also test for react-scripts being contained within the test command, when writing the code I just wanted to prevent false positives more than I thought about quirky templates.

[JoshSchreuder]

No worries. Well it's documented here so if someone else runs into the problem at least they know how I managed to fix it 😄

[callmeberzerker]

@JoshSchreuder you are amazing X_X thanks for that.

[mojiAh]

https://github.com/jest-community/vscode-jest/issues/244#issuecomment-456709258
Exactly same happened here

[stephtr]

Maybe we should add the handling of cross-env then? Would be one or two additional lines of code without potential of breaking any existing setup.
Update: see #566