TypeScript Unit-Testing on VSTS with Continuous Integration in a C# Web Application

Question

I have a web application with continuous integration via visual studio team services and I want to add unit tests for my typescript code.

First try

At first I tried to create a Blank Node.js Console Application in my solution. I wrote some tests (with 'mocha',etc...) which worked fine locally. But as I commited the solution I noticed the build server not being able to...well...build:

Error : web.config not found in project, to create a project to deploy to Microsoft Azure you must create an Azure Node.js project.

This message suggested that msbuild wanted to create a deployable package of my NodeJS Project even though I only used it for testing purposes. The first thing that came to mind was to add a minimal web.config even though I did not want to publish the NodeJS project:

Error MSB4062: The "TypeScript.Tasks.FormatLocalizedString" task could not be loaded from the assembly C:\xxx\Microsoft.TypeScript.MSBuild.2.3.3\build\\..\tools\net45\TypeScript.Tasks.dll.  Confirm that the <UsingTask> declaration is correct, that the assembly and all its dependencies are available, and that the task contains a public class that implements Microsoft.Build.Framework.ITask.

I don't really see any way out of this...

Second try

Then I tried to use a UnitTest Project instead of the NodeJS Project. Surely this will work, or so I thought. With this approach I ran into the problem that VS Test did not recognize my Unit Tests (which worked fine on my NodeJS project) as there was no option to mark my files with the appropriate "Test Framework" attribute which was present on the file properties in the NodeJS Project. Instead there were the default file options for "Custom Tool", etc:

No Problem! I'll just adjust the .csproj file directly!

 <TypeScriptCompile Include="main.test.ts">
  <SubType>Code</SubType>
  <TestFramework>Mocha</TestFramework>
  <Publish>False</Publish>
</TypeScriptCompile>

But, alas, no dice...The Tests still could not be found by VS Test

Question

What is the best practices approach here? Is there something I'm not thinking of? Was the 'First try' correct and I just did not find the correct option to disable the publishing of my NodeJS App?

PS

I now think my first approach was the correct one. Just to be clear: A lot of things already worked:

Installed Node Tools for Visual Studio on the Build Server
Compiling typescript via VSTS
Running Tests in VS Test locally
List item
Running npm install on build (in VSTS)

Now all I need is for the build to go through :/ I now notice that I did not write the full error message for the last error in the first approach:

##[error]C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets(60,5): Error MSB4062: The "TypeScript.Tasks.FormatLocalizedString" task could not be loaded from the assembly C:\Agent-PaketBuildIntern1\_work\54\s\packages\Microsoft.TypeScript.MSBuild.2.3.3\build\\..\tools\net45\TypeScript.Tasks.dll.  Confirm that the <UsingTask> declaration is correct, that the assembly and all its dependencies are available, and that the task contains a public class that implements Microsoft.Build.Framework.ITask.

So we see here that it uses the .targets file under C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\ and not the one under ......\packages\Microsoft.TypeScript.MSBuild.2.3.3\tools

Could this be the problem? How do I go about correcting that?

.njsproj file:

 <Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003" ToolsVersion="4.0">
  <PropertyGroup>
    <VisualStudioVersion>14.0</VisualStudioVersion>
    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
    <Name>MyProjectName</Name>
    <RootNamespace>MyProjectName</RootNamespace>
    <SccProjectName>SAK</SccProjectName>
    <SccProvider>SAK</SccProvider>
    <SccAuxPath>SAK</SccAuxPath>
    <SccLocalPath>SAK</SccLocalPath>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <SchemaVersion>2.0</SchemaVersion>
    <ProjectGuid>5697a590-d15f-401b-b8d8-138bbd5d3330</ProjectGuid>
    <ProjectHome>.</ProjectHome>
    <StartupFile>
    </StartupFile>
    <StartWebBrowser>False</StartWebBrowser>
    <SearchPath>
    </SearchPath>
    <WorkingDirectory>.</WorkingDirectory>
    <OutputPath>.</OutputPath>
    <TargetFrameworkVersion>v4.0</TargetFrameworkVersion>
    <ProjectTypeGuids>{3AF33F2E-1136-4D97-BBB7-1795711AC8B8};{9092AA53-FB77-4645-B42D-1CCCA6BD08BD}</ProjectTypeGuids>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
    <EnableTypeScript>true</EnableTypeScript>
    <StartWebBrowser>false</StartWebBrowser>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Debug' ">
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Release' ">
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>
  <ItemGroup>
    <Content Include="tsconfig.json">
      <SubType>Code</SubType>
    </Content>
    <Content Include="package.json" />
    <Content Include="README.md" />
    <Content Include="Web.config" />
    <TypeScriptCompile Include="Scripts\typings\node\node.d.ts" />
    <TypeScriptCompile Include="bootstrap.test.ts">
      <SubType>Code</SubType>
      <TestFramework>Mocha</TestFramework>
      <Publish>False</Publish>
    </TypeScriptCompile>
    <TypeScriptCompile Include="util\templates.ts">
      <SubType>Code</SubType>
    </TypeScriptCompile>
  </ItemGroup>
  <ItemGroup>
    <Folder Include="util\" />
    <Folder Include="Scripts\" />
    <Folder Include="Scripts\typings\" />
    <Folder Include="Scripts\typings\node\" />
  </ItemGroup>
  <PropertyGroup>
    <PreBuildEvent>cd $(ProjectDir)
call npm install
    </PreBuildEvent>
  </PropertyGroup>
  <Import Project="..\..\..\packages\Microsoft.TypeScript.MSBuild.2.3.3\build\Microsoft.TypeScript.MSBuild.targets" Condition="Exists('..\..\..\packages\Microsoft.TypeScript.MSBuild.2.3.3\build\Microsoft.TypeScript.MSBuild.targets')" />
  <Import Project="$(VSToolsPath)\Node.js Tools\Microsoft.NodejsTools.targets" />
</Project>

What're tasks of your build definition? You can use Hosted agent, which can run mocha test too. — starian chen-MSFT, Jul 13 '17 at 08:53
My njsproj file: https://1drv.ms/t/s!AresBGZVYryjhTG8KyErCnUSe9Fe — starian chen-MSFT, Jul 13 '17 at 09:00

score 0 · Answer 1 · answered Jul 13 '17 at 05:56

Refer to these steps (vs2015):

Create a new Node.js Console Application
Update package.json dependencies and scripts like this

:

{
  "name": "nodejs-console-app-demo",
  "version": "0.0.0",
  "description": "NodejsConsoleAppDemo",
  "main": "app.js",
  "author": {
    "name": "XXX",
    "email": ""
  },
  "dependencies": {
    "@types/mocha": "^2.2.41",
    "assert": "^1.4.1",
    "mocha": "^3.4.2",
    "typescript": "^2.4.1"
  },
  "scripts": {
    "tsc": "tsc"
  }
}

Right click the project/folder >Add> New Item> Select TypeScript Mocha UnitTest file
Add your test code
Add a folder to your project (e.g. ntvs)
Copy 1.1 folder in C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Node.js Tools for Visual Studio to that ntvs folder
Right click your project > Add > New Item> Select Json template> add a new json file to project > Rename it to tsconfig.json

:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "module": "commonjs",
    "moduleResolution": "node",
    "watch": false
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*",
    "test/**/*"
  ]
}

Right click your project > Unload project
Right click your project > Edit [projectname].njsproj
Change <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion> to <VisualStudioVersion>14.0</VisualStudioVersion>
Save all changes and add files to source control (by default .dll files will be ignored, so make sure all files in ntvs folder have been added to source control, you can right click ntvs folder > add files to source control)
Create a build definition
Npm install task (Command: install; Working folder: [package.json file path, such as $(Build.SourcesDirectory)\NodejsConsoleAppDemo]
Npm install task (Command: custom; Working folder: [tsconfig.json file path, such as $(Build.SourcesDirectory)\NodejsConsoleAppDemo]; Command and arguments: run tsc)
Visual Studio Test task (Test assemblies: [project file path, such as NodejsConsoleAppDemo\NodejsConsoleAppDemo.njsproj; Search folder: $(System.DefaultWorkingDirectory); Test platform version: Visual Studio 2015; Path to custom test adapters: [ntvs folder path, such as NodejsConsoleAppDemo/ntvs]]
Queue build with Hosted agent

There is an article that can help you: nodejstools.

If you are using VS 2017, you can refer to this thread: Running node.js tests locally in vstest.console.exe gives … Error: An exception occurred while invoking executor 'executor://nodejstestexecutor/v1.

Thanks for your feedback! For clarification I edited my post above. I already knew the first link you posted. I am not sure how it can help with my problem. — phil, Jul 13 '17 at 08:15

score 0 · Accepted Answer · answered Aug 17 '17 at 07:05

After several attempts to make this work I decided to solve the problem at hand by putting the Mocha tests inside the Web Application Project and running them via npm (in the build steps). Inside the CI build definition I published the result of these tests via mocha-junit-reporter (https://www.npmjs.com/package/mocha-junit-reporter - see this answer for details).

This works for my requirements, although I would have liked to have the unit tests in a seperate project.

TypeScript Unit-Testing on VSTS with Continuous Integration in a C# Web Application

2 Answers2