microsoft / microsoft/nodejstools

Jest Handle Typescript Tests and node_modules in sub-folder

Open
#2,317 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
C#
Stars
1.8k
Forks
355
PR merge metrics
No merged PRs in 30d

Description

Microsoft.JavaScript.UnitTest nuget package should manage typescript tests and allow node_modules to be in a subfolder.

Expected Behavior

I tried to make ASP.net core React SPA template app unit tests work but the issue when I try to follow Microsoft Documentation on JS Testing is with this Microsoft.JavaScript.UnitTest package (nodejstools, this repository and test adapter).

e.g. if you look the csproj for ASP.net core template app from visual studio. The React client app is in a subfolder called "ClientApp".

I tried to make it work with Jest and Typescript.
However the Test Adapter in this repository doesn't manage typescript tsx files and can't find jest in a subfolder (and there are no options to change that).

Node module folder

TestFrameworks/Jest/jest.js will only look for node_module and jest in the same directory as the csproj (not the case in dotnet core template for example, it would be in the ClientApp subfolder).

const packagePath = path.join(projectFolder, 'node_modules', packageName);
Typescript

TestDiscoveryWorker will only look for .js files and no .tsx or .test.tsx files, we should be able to provide the extension name.

var fileList = Directory.EnumerateFiles(testFolderPath, "*.js", SearchOption.AllDirectories).Where(x => !x.Contains(NodejsConstants.NodeModulesFolder))

I think it should work just by changing this because jest-editor-support.parse() can support typescript files: see their repository.

if (filePath.match(/\.tsx?$/)) {
    return parseTs(filePath, serializedData);
Once this project is updated

Dotnet core SPA templates should be updated with:

<PropertyGroup>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
    <JavaScriptTestRoot>ClientApp\src</JavaScriptTestRoot>
</PropertyGroup>
<PackageReference Include="Microsoft.JavaScript.UnitTest" Version="1.5.10610.1">
    <PrivateAssets>all</PrivateAssets>
    <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
    </PackageReference>
</ItemGroup>

package.json should also include the latest version of jest-editor-support:

{
  "dependencies": {
    "jest-editor-support": "^28.1.0"
  }
}

And other properties required for this change (maybe fileformat for tsx vs js, maybe node_module path) should also be added to the csproj.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with TestFrameworks/Jest/jest.js around packagePath resolution and TestDiscoveryWorker.cs around the *.js file enumeration. Trace how JavaScriptTestRoot and related project properties reach the adapter, then verify that Jest can be discovered under a ClientApp subfolder and that TypeScript and TSX test files are discovered. Done means the adapter handles both nested node_modules and the requested TypeScript test extensions.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, javascript, nodejs, typescript
Domain
testing, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.