1 comment
Comment actions Permalink
Official comment

It depends on your particular setup, but for most cases it's easily done using Docker integration.

 

I've set up a simple demo project based on Create React App and Storybook

 

The main part here is "Build Step: Command Line". Note that it runs in a docker container ("node:latest" states for Docker's official node image). The easiest way to get this feature now is to install TeamCity 2017.2 EAP.

I use yarn for installing dependencies and running scripts here, but you can use npm as well.

 

test-ci here runs tests with jest-teamcity-reporter plugin (see commit):

react-scripts test --env=jsdom --coverage --testResultsProcessor=jest-teamcity-reporter

The --coverage option turns on generating code coverage report, which can be displayed in a build tab. To do this, I use report tabs feature. Actually, there is a predefined Code Coverage tab on https://teamcity.jetbrains.com/ root project, which expects the report to be at coverage.zip!index.html. So all I have to do is specify artifact path "coverage/lcov-report => coverage.zip" in General Settings section.

 

I also add artifact path for build directory ("build => build"), so that it's available in artifacts and can be deployed to some server, which is out of scope of this demo.

 

build-storybook script generates a living style guide for your component base. I wanted to use another build tab to display it, so I added "storybook-static => stories" artifact path. This time I actually needed to set up a custom tab so I went to "React App" project settings and added it in "Report tabs" section:
Note that this tab 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.

 

I hope this demo helped you =)

Please sign in to leave a comment.