Jest config

First, make sure that your jest configuration is correct. If you’re with TypeScript (and you should ?), I recommend using ts-jest configuration preset. Our config looks as follows:

If everything is fine, you should be able to execute npm test command (assuming it’s defined in package.json as "test": "jest") without issues. All your tests should be executed.

We now need to make StrykerJS working with that.

StrykerJS with jest configuration

If you install StrykerJS as described here, you’d expect that npx stryker run command runs mutations and everything is just fine. However, if you’re having wierd issues and errors with that, it probably means that Stryker is not properly configured to execute tests with jest.

When you run npx stryker run, it creates mutants (modifications in your source code) and runs tests against them. It means that StrykerJS must run your tests in the same way you run them. So, if you run tests with jest, Stryker must be able to do the same.

We struggled with many issues related to running StrykerJS with jest. Some of them were related purely to jest, but some of them to TypeScript as well. After numerous trial-and-errors and consulting with StrykerJS community members, we worked out a configuration that finally works fine for us.

Going straight to the point, here’s the stryker.conf.json file that would make StrykerJS work fine with jest and TypeScript:

To make it work, install the following npm packages: @stryker-mutator/core, @stryker-mutator/jest-runner and @stryker-mutator/typescript-checker.

Notice few important settings here:

• "checkers": ["typescript"] – this enabled a TypeScript checker plugin, which makes mutations being checked for types before running tests on them. It means that if a mutation introduced by Stryker doesn’t compile because of types issues, it won’t be taken into account for mutations (which makes perfect sense)
• “disableTypeChecks” – you still need to tell StrykerJS to not check types when compiling your code with type errors (mutants). It will compile them without types checking, but thanks to TypeScript checker plugin these ones will be filtered out for mutations
• "tsconfigFile": "tsconfig.json" – make sure to point to the TS config file you’re using here
• "concurrency": 4: this is another setting we experimented with to make Stryker working correctly. Without it, we were getting weird errors about lack of memory when running mutations (FATAL ERROR: Committing semi space failed. Allocation failed - JavaScript heap out of memory)
• "testRunner": "jest" – this one enables the jest as our tests runner
• "jest" – here you tell Stryker to use your jest.config.js file we talked about at the beginning

With these settings, I hope that you are able to see this beautiful output of npx stryker run in your console:

StrykerJS with jest and TypeScript – summary

I hope this is helpful for you. StrykerJS is a developing framework, so some things are still hard to figure out. We believe mutation tests are a great way of improving our tests, so we use them on a daily basis. If you ever have any issues with StrykerJS, I encourage you to reach out to the community on Slack. They are extremely helpful there ?

The post How To Use StrykerJS With jest And TypeScript appeared first on Yumasoft.

and you’re looking for how to show their results in TeamCity as follows:

Then this article will help you configure that ?

Prerequisites

To run jest tests on TeamCity, you need to use jest as your testing framework of course ? If you use TypeScript – which I definitely recommend – ts-jest package will also be useful.

Having these packages installed, your basic jest.config.js file should look similar to this:

You should also have a test script defined in scripts section of your package.json file:

With this setup, you are able to execute your tests with npm test command and see the results in the console:

Such tests results are however not recognized in any way by TeamCity build server. Let’s see how to configure that.

Installing TeamCity reporter

In order to see the tests results in TeamCity, we need the npm test command to produce a different output when run on TC server. This output must be compatible with TeamCity’s service messages.

Fortunately, you don’t need to implement it by yourself ?

First, install jest-teamcity npm package to your project. Next, add jest-teamcity to reporters configuration option in your jest.config.js file:

Adding TeamCity build step

Next, login to your TeamCity server. You need to know the location of npm.cmd file on your TeamCity server. It should be in NodeJS installation catalog. In our case, the path to the file is C:\Dev\nodejs\npm.cmd.

Now, go to TeamCity web administration interface and create a new build configuration or edit a current one. Then, add a new build step:

Configure the new step as follows:

• Runner type: Command line
• Step name: Jest JS tests
• Execute step: If all previous steps finished successfully (or anything else you prefer)
• Working directory: name of the catalog in your web app where you normally run npm test
• Run: Custom script
• Custom script: “your_path_to_nodejs\npm.cmd” run test, for example: “C:\Dev\nodejs\npm.cmd” run test
• Format stderr output as: error

If everything is configured correctly, during the next build you should see jest tests output recognized and nicely reported by TeamCity:

If that’s not the case, make sure that TEAMCITY_VERSION environment variable is set on your TeamCity machine. That’s how jest-teamcity reporter recognizes when to output standard jest output and when to use TeamCity’s service messages format.

Debugging jest tests on TeamCity locally

If you run npm test locally, you will see that the output is still normal, not the TeamCity format. That’s correct, because as we said before, the TEAMCITY_VERSION environment variable must exist in order to see TeamCity-formatted output. Normally we don’t want to see TeamCity-formatted tests output locally, of course ?

It means that if you want to debug this configuration locally and actually see the TC tests output on your dev machine, you need to define such environment variable locally.

In order to do that in Windows, go to Edit the system environment variables, click on Evironment Variables... and add a new one in System variables section. Call this variable TEAMCITY_VERSION and give it some value, for example 2021.1:

If you’re on another operating system, add the environment variable according to your system’s requirements.

Next, restart Visual Studio Code or the console tool you are using and execute npm test again. Now you should see the tests results output in TeamCity format:

Jest tests in TeamCity – summary

I hope you found this piece of advice useful. At Yumasoft, we value tests a lot, both backend and frontend ones. However, the tests which are not run automatically are worth nothing. That’s why we always have all of our tests run automatically as part of our CI process (TeamCity in the sample project’s case).

The post How To Configure Jest Tests on TeamCity appeared first on Yumasoft.