Sources from my last post are also available here.
JEST TEAMCITY REPORTER CODE
The code for this post will be available on my GitHub. You have a project in Azure DevOps that the pipeline will run in.You have basic knowledge about writing tests.
I am going to make a few assumptions before we move any further into this post:
In addition to this, we will look at how we can run these tests in our Azure Pipeline and publish the test results and code coverage for display and verification. We will add some simple tests and produce a code coverage report. This time we are going to continue the work on the module I created in the previous post. Test suites and code coverage can give a false sense of security, and even though your project has 100% code coverage it does not mean that all edge cases, inputs, and outcomes are tested. Tests can be written wrong or miss use cases that will still make the functionality fail. With that said, no test suite is perfect and one should not fully rely on the tests to verify that everything works as expected. In some cases they can also be useful source for information about how the application behaves and how data flows through it. Having a good test foundation can help new developers getting started quicker, and well written tests can allow them to ensure they are not breaking existing functionality when introducing changes to the code base. Tests are not only useful to ensure our code meets our functional expecations, but they are also useful for any new developers introduced to our project. A different topic that we will look at today is tests and code coverage. Note that this Stories tab available on the build results page is generated per build, so you can see how your components change over time and, for example, detect at which point something started looking and/or behaving in a strange way.In my last post, we looked at keeping code clean using linters to keep a consistent coding style for our project. Then we set up a custom tab in the “React App” project settings using the Report tabs section: It will be handy to use another build tab to display it, so the storybook-static => stories artifact path has been added. In our build the build-storybook script generates a living style guide for your component base using Storybook. We also added the artifact path for the build directory ( build => build), so that it is available in the artifacts and can be deployed to some server later, which is out of scope for this post.Īfter running the build, the Code Coverage report is available on the build results page. TeamCity has the report tabs feature, and on our server the Root project – the parent of the demo project – has a predefined Code Coverage tab which expects the report to be at coverage.zip!index.html:Īll we have to is specify the artifact path coverage/lcov-report => coverage.zip in the General Settings section of our build configuration: In the line react-scripts test -env=jsdom -coverage -testResultsProcessor=jest-teamcity-reporter, the -coverage option turns on generating a code coverage report, which will be displayed in a dedicated build tab. Test-ci in our script runs tests with the jest-teamcity-reporter plugin (see this commit). node:latest in the Docker settings section stands for Docker’s official node image):
TeamCity will start the container and run this build step in it. Our command line will run in a docker container – in TeamCity 2017.2 EAP the Command Line runner settings have the Docker settings section where you can specify the image for the container: Here yarn is used for installing dependencies and running scripts, but it is possible to use npm as well. We are going to execute the following script: We used the Command Line build step for our build configuration. We’ve created an example on GitHub based on Create React App and Storybook, and set up a demo project on the public TeamCity server with the VCS Root pointing to the project on GitHub. (At the moment the TeamCity-Docker support can run on Mac/Linux build agents). In this blog post we will talk about building a React application with TeamCity using one of the newest TeamCity features – Docker integration, introduced in TeamCity 2017.2 EAP1.
0 kommentar(er)
