How to debug Jest tests in the browser? - javascript

How do you guys proceed when having to debug Jest tests? I remember back in the days, when I was using Mocha, I could use a headless browser to do CLI testing but there was also the possibility of loading the tests into a browser and use more powerful debugging capabilities like Chrome Dev Tools. For example, console.log with Jest just plainly sucks.
I tried to use https://jestjs.io/docs/en/troubleshooting and use Node Debugger but its behavior is erratic (it doesn't always connect to the debugger or stops at the right place) and console.log is not output to the console.
Is there a way I'm not aware of of having the same functionality in Jest?

As an alternative, I am using Visual Studio Code.
Through a "launch.json" file I start jest, and this way you can debug directly in your IDE.

Related

what is the difference between karma and phantomJS

I know that Karma is a test runner for JS Unit Testing frameworks like Jasmine or Mocha. And PhantomJS provides headless browser for running Jasmine or Mocha Tests.
But, what is the difference between Karma and PhantomJS? Are they two competing tools, or do I use PhantomJS on top of Karma to run my unit tests without a browser?
PhantomJS has nothing to do with testing. In the unit testing scope it would become one of the target browsers.
PhantomJS allows you to run unit tests in a browser when a desktop environment doesn't exist.
Karma is a runner that provides the finished reports on how successful the tests where.
Jasmine is the library used to write unit tests.
So to clarify
Jasmine unit tests are run by Karma inside the browser PhantomJS.
It seems like you have somewhat already answered your own question, but I'll expand what you have mentioned.
Karma is a test running framework that is largely test framework language agnostic. It has a rich plugin ecosystem that allows you to heavily customize how, when, and why your tests run.
In order to test Javascript, we often need to test against an incarnation of the DOM. There are numerous plugins that allow you to wire into different browsers such as karma-chrome. These plugins bootstrap the required browser and execute your tests against the browser.
However, there are times when you want to run without a physical browser being installed on the target test box. this is where PhantomJS comes in. It is a headless browser that can be run without being installed on a target machine. It cannot replace Karma. If you want to describe it as a "competitor", it would be a competitor to IE, Firefox, Chrome, and Safari.

Cannot debug Karma tests in Webstorm

I have been looking for a few days around the Internet in order to find an answer but, so far, haven't found anything.
So here's my problem: I cannot debug Karma tests or my app.
I am developing on a CentOS 6.7 a web app with WebStorm 10.0.4
I am using TypeScript and Angular, and use Karma for unit tests and Protractor for e2e tests. I managed to set the Protractor debuging, which means I can set some breakpoints over my tests code and it will pause on it.
I am using Firefox 38.0.0 (can't use an other version). Chrome is not installed.
I've set a Karma run configuration and a Remote Firefox configuration.
Karma problems
When I run my Karma tests, it's all good. But when I want to debug them, I've got the following message:
No supported browser found
JavaScript debugging is currently supported in Chrome or Firefox.
App debugging problems
It's even worse : when I launch the remote firefox debugging, everything is fine until I put a breakpoint in WebStorm: then the app just freeze and I can't do anything.
What am I missing ? Is there more configuration to do ?
Your help would be very appreciated.
If you are still looking for the solution here is my solution:
I think debugging in WebStorm is only possible with Chrome. At least I couldn't find any word about firefox anymore.
After installing Chrome and JetBrains extension open settings of the WebStorm. Select Tools => Web Browsers and enable Chrome.
Since I did step 2, debugging was possible.
Hope it helps you too.

Is there an "immediate window" in Visual Studio Code to run Javascript?

Yes, I use F12 in the browser all the time to test out Javascript snippets with the console. I'm tired of that (for the moment anyway).
I've read that in Visual Studio you can use the immediate window to run Javascript interactively.. I've haven't tried it that hard. I think when I did it told me it can't evaluate while in design mode... ugh, what a pain.
I do like to use Visual Studio Code (sublime text historically) sometimes to just mess around with syntax of snippets. Would also be nice if I could just run Javascript there too quickly. Is there a package I could download in VSCode to do so? Or something already built in?
As of (at least) my current version of VS Code (1.5.2), the "Debug Console", while debugging, lets you run arbitrary JavaScript code as you would in the VS Immediate Window. (Similar to as you would for the Chrome Dev Tools Console.)
There is no Immediate Window unlike Visual Studio in VSCode. But you can still execute Javascript in VSCode.
Install the Code Runner Extension - https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
Open the JavaScript file in VSCode, then use shortcut Ctrl+Alt+N, the code will run and the output will be shown in the Output Window.
I've found this extension that makes a scrathpad for JS, that runs at the same time as you are typing: https://quokkajs.com/
Works on VS Code, Jet Brains, and Atom.
If you don't want to start a debugging session or installing an extension, a simple way to have a JavaScript console is to start Node in a Terminal.
View -> Terminal
Start node (without any argument -you'll need node in your PATH)
Now you have a repl with auto-complete and value preview.
It doesn't have the features of the Chrome Console, but I find it good enough for evaluating JS code while I'm working.
Run the command node in the terminal below the editor, this will create a node environment where arbitrary JavaScript can be entered. You must first have node (and apparently npm) installed from nodejs.
This might do it: https://code.visualstudio.com/Docs/runtimes/nodejs
Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js is the runtime and NPM is the Package Manager for Node.js modules.
To get started, install Node.js for your platform. The Node Package Manager is included in the Node distribution.

execute javascript (node.js) code right from Visual Studio in REPL manner

I want to run some javascript code (unit and interaction tests) right in visual studio and be able to see console output. Is it possible to do that with VS???
Node.js Tools for Visual Studio has a REPL for node.js that can be used for such things.
I love the Interactive Window for Visual Studio (and 2017) but lately I have been starting to use Visual Studio Code. I really like it but the Interactive Window (REPL) is missing.
I need that. So I tried several extensions but none of them was as good as Node.js Tools for VS. The solution was to make one my self, you may need NodeJs 8+ to use Node.js REPL for Visual Studio Code.
Preview of Node.js REPL for VS Code
I believe it is possible, at least to a degree. I haven't done exactly what you're saying, but I do have node running in iis with iisnode. I also know that there is a version of iisnode that runs under iis express. I would look into that.
My guess is you would be able to launch a project using the iisnode module, and you could set the default document to the .js file you want to run, but you may only be able to get console output through the browser.
iisnode does give you the ability to debug and see the console output through your browser. For example, if you run the iisnode module for a file test.js at localhost:1234/test.js, you can get a the browser developer tools by going to localhost:1234/test.js/debug. That would give you console output, but I'm not totally certain you would be able to get it directly in VS.

How can we run JavaScript jasmine tests from Jenkins (Hudson) without loading a JSP?

We have a rich web client. Our controllers and service facades are written in coffeescript (JavaScript) and jquery. In the past they would have been java.
To run our JavaScript jasmine tests from Jenkins/Hudson, we use java's junit and htmlunit to load a test oriented jsp page which includes the jasmine specs.
When the Htmlunit tries to run, it blows up trying to getPage() probably because of an XML parser class path which is extremely challenging to track down in our world.
We just want to be able to run our JavaScript tests from Jenkins and have it report failure if a JavaScript test does not pass. We are just using jsp and htmlunit in order to run JavaScript tests. Can we load the JavaScript tests and javascript code into a JavaScript engine with Jenkins as the thing that kicks it off? If so, how?
Sounds like you're in a Java environment. My jasmine-maven-plugin might be a good fit.
Jasmine Reporters would also be a solution. It has instructions for running headlessly via PhantomJS for example, and it can generate JUnit XML so Jenkins can understand the test results natively, graphing test count, duration, and failure over time.
Also, the "xvfb-run" wrapper often provided with xvfb is a great help here, so you can do "xvfb-run phantomjs.runner.sh ..." in a truly headless environment.
I've previously solved this problem by running the tests with a node.js plugin called jasmine-node
This solution of course requires node.js and a few node modules to properly run the jasmine tests. There is no real browser running the tests, but an emulated one using a module called jsdom, which basically creates a headless browser, and more specifically, a DOM, which the tests can interact with.
There's node modules for jQuery, underscore and propably other too, so these can be tested too. You can even skip the whole browser emulation if you'd rather run the tests in a browser, though I find it too cumbersome compared to automated Jenkins testing.
jasmine-node generates jUnit test reports, which Jenkins can interpret just fine.
I just realized there is some jenkins-jasmine-node plugin that might ease this process.
Grunt is your friend
use grunt http://gruntjs.com/
with grunt jasimine https://github.com/gruntjs/grunt-contrib-jasmine
with nodejs http://nodejs.org/
on jenkins using https://wiki.jenkins-ci.org/display/JENKINS/NodeJS+Plugin
got this setup and it's really nice, plus this gives you a place to start making your build server do other nice things such as deployment, unit testing, etc you know, other nice things
Can you use selenium? That would actually use a real browser then and get as close to the real environment as possible.

Categories