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.