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.
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):
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 =)