I created a new ASP.NET Core React app using dotnet new react. Then I added some Jest unit tests, which run nicely when I run npm test on the command line.
I would like to be able to run the tests from Visual Studio 2019, either using the Test Explorer window or ReSharper.
First of all, it seems that ReSharper only supports Jasmine and not Jest (ReSharper documentation, Feature request).
So I tried using the Test Explorer, following this official guide. It has support for Jest. However, the React template for ASP.NET Core is not a node.js project, so the options for test framework and whatnot are not available. Thus, Test Explorer finds no tests.
Then I tried running the tests using the command vstest.console.exe MyProject.csproj /TestAdapterPath:"C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter". The output gives me some hope:
Microsoft (R) Test Execution Command Line Tool Version 16.5.0
Copyright (c) Microsoft Corporation. All rights reserved.
Starting test execution, please wait...
A total of 1 test files matched the specified pattern.
No test is available in MyProject.csproj. Make sure that test
discoverer & executors are registered and platform & framework version settings are appropriate and
try again.
The test runner finds at least one test file (actually I have 2), but it doesn't know that it's supposed to use Jest executor. Can I maybe add something into the .csproj file to make it work?
This is how I got .njsproj to work. I hope to make a .csproj work as well. Start by creating a new Blank Node.js Console Application with TypeScript. Tested with JavaScript as well and it works.
Create a folder called tests and add a JavaScript Jest UnitTest file:
Failed to find "jest" package. "jest" must be installed in the project
locally. Install "jest" locally using the npm manager via solution
explorer or with ".npm install jest --save-dev" via the Node.js
interactive window. Failed to find "jest-editor-support" package.
"jest-editor-support" must be installed in the project locally.
Install "jest-editor-support" locally using the npm manager via
solution explorer or with ".npm install jest-editor-support
--save-dev" via the Node.js interactive window.
Then ran the following command from Developer Command Prompt for VS 2019:
vstest.console.exe "C:\Users\Oscar\source\repos\NodejsConsoleApp1\NodejsConsoleApp1\NodejsConsoleApp1.njsproj" "/TestAdapterPath:C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\Extensions\Microsoft\NodeJsTools\TestAdapter"
Installed jest and jest-editor-support with Dependency type Development.
After doing this the tests can be ran:
The tests will now show up in Test Explorer as well:
Then rename UnitTest1.js to UnitTest1.ts. You should see the following error:
Install #types/jest as dev dependency and it should work:
I did not have to specify this but if something fails then check project properties and set JavaScript Unit Test values.
Also check the properties of the test file, if added via GUI these values should be correct by default.
Related
I've done Run All, that doesn't find them. At command line I can run npm test and it finds and executes the tests. However, they never show in Test Explorer. I created the React Typescript project from the 2022 template.
I expected to see my name.Test.tsx tests in Test Explorer.
I inherited an AngularJs application that was built using WebStorm, NodeJs, Npm, Grunt etc.
The app is set up in such a way, that I have to run grunt serve to initialize a local server that hits the API and return data. If I simply run it as Localhost (through either WebStorm or VS), it does not pass validation to return my data through the API.
My question is; Is it possible to link grunt serve to IE in Visual Studio, in the same way you would run an application in Debugging (F5) mode?
I enjoy using Visual Studio, and like debugging and stepping through my code with IE, as this allows me to set breakpoints in my JavaScript and C#.
I would suggest that Grunt Launcher will help you:
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Although I did not manage to link "grunt serve" to IE in Visual Studio, I was able to debug using IE, by running my project in Debug mode (F5).
I simply copied the path with token created when running "grunt serve", and used this as my path in Local Host when debugging in Visual Studio. This way it connects to the API, and is validated.
I have a web project, say 'WebProj' in which I have defined all the my javascript source files with angular code. I am defining my chutzpah unit test cases for those javascript source files in another project 'WebProj.Tests' along with my other C# test cases. I am having both the web and tests project under same solution.
My problem is that when I try to integrate the web project to the TFS build process I cannot run the chutzpah test cases as the web project output folder don't have the chutzpah test case files copied to the project output folder. At the same time the test cases are executed if I have the chutzpah test cases defined in the same web project.
How can I execute the javascript chutzpah test cases on build process if those are defined in a separate Test project and include them in project output folder after build?
To have the test case files copied to the build output folder, you need to right-click the .js file and select Properties -> set the Copy to Output Directory property to be Copy always.
Additionally, you need to follow the steps below to run chutzpah tests in TFS build process.
Install jasmine.js to the test project.
Install Chutzpah Test Adapter
Install Chutzpah test runner to the solution (on solution level, not project level).
Set the test assembly to match your javascript test naming convention. e.g. ***.tests.js
Configure to use the custom test adapter during TFS build process. 1). If you are working with vNext build, go to Visual Studio Test step, set the Path to Custom Test Adapters property to be similar to $(Build.SourcesDirectory)\packages (get the path via NuGet restore); 2). If you are working with XAML build, go to Build –> Manage Build Controllers, set Version Control Path to custom Assemblies to the package path.
Completed steps can be found on the "But what if you want run Jasmine.JS test?" part in this blog: http://blogs.blackmarble.co.uk/blogs/rfennell/post/2015/09/23/Running-nUnit-and-JasmineJS-unit-tests-in-TFSVSO-vNext-build.aspx
And also this blog (do not follow the Step2 to check in these files into TFS version control, instead use NuGet to donwload these packages.) http://blogs.msdn.com/b/visualstudioalm/archive/2012/07/09/javascript-unit-tests-on-team-foundation-service-with-chutzpah.aspx
Add another Visual Studio Test step to your build definition that just runs the JavaScript tests as shown below; the redacted portion in the green box of the Test step is the path to your test files. When the build runs, the stats from the two test runs will be combined in the build output.
First of all, I am very beginner in using node.js / angualar.js /protractor.js and jasmine.js stuff and I am not from web dev corner at all.
But for now, I just want to create some protractor test for an angular app and this is actually working quite fine. But I am wondering if it's possible to get VS2013 intellisense working?
I would really appreciate if VS would suggest functions of objects like 'browser.xxx'.
I am really stuck with that, looking forward for some hints!
thx Florian
Ill just give an answer to myself! To get Visual Studio 2013 intellisense and debugging working for angular protractor tests, follow these steps:
Install node.js
Install protractor (global) („npm install -g protractor“; „webdriver-manager update“)
Install Visual Studio 2013 node.js Tools
Install Visual Studio 2013 TypeScript Tools
Create a new project „Typescript\Node.js\Blank Node.js Console Application“
Add your „conf.ts“ and „spec.ts“ files to the project
Right click on „conf.ts“ and select „Set as node.js startup file“
In „Project properties“ set your „Node.exe path“ to your protractor executeable file, eg. „C:\Users\myUser\AppData\Roaming\npm\protractor.cmd“
Download typescript DefinitelyTyped definitions from git hub:
https://github.com/borisyankov/DefinitelyTyped
In your VS2013 project folder „Scripts\Typing“ create the subfolders „jasmine“, „protractor“ and „selenium-webdriver“
Add the typing definition files "angular-protractor\angular-protractor.d.ts", "jasmine\jasmine.d.ts" and "selenium-webdriver\selenium-webdriver.d.ts" into the appropriate project folders you created in the step above.
Write your protractor test and enjoy code highlighting
Start webdriver-manger „webdriver-manager start“
Hit „F5“ to start debugging
Enjoy!
Florian
I have been able to write tests using protractor in VS2013, however, when I open my "Test Explorer" tab and right click on the test I want to run it fails within seconds. I'm wondering if it is not possible to run protractor tests this way and if they can only be run from the cmd.
I have checked out the links left on other questions on this site and none of them have fixed the issue I am running into.
Yes that is possible to Run the Protractor Tests in Visual Studio.
To run the Tests, you need to create a Node.Js Console application (Get template online) and create the project.
Here are the Steps:
Install Node.js
Install Node.js Tools for Visual Studio
Configure JDK
Create a Node.js Console Application and install Protractor
npm install protractor --save-dev
Update selenium standalone server
.bin\webdriver-manager update
Start selenium standalone server
.bin\webdriver-manager start
Run test specs
.bin\protractor protractor.conf.js
To get the tests in the Test Explorer in Visual Studio 2013, you need to get the Chutzpah Test Adapter which is a extension of visual studio.
you can either go to https://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fe and download or go to Tools => extension and updates => search for this tool.
Once you have installed, you can run the tests directly from visual studio.