Skip to content

Jest Handle Typescript Tests and node_modules in sub-folder #2317

@pleandre

Description

@pleandre

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions