Create-react-app: Team city reporter

[bondarewicz]

Description

I wonder if anyone tried to use team city reporter for jest?
I'm looking at jest-teamcity-reporter and following guide:

1. npm install --save-dev jest-teamcity-reporter
2. package.json

"jest": {
    "testResultsProcessor": "node_modules/jest-teamcity-reporter"
}

and following modification to scripts section:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "ci": "react-scripts test --env=jsdom --teamcity"
  },

then run CI=true npm run ci

Expected behavior

Output of team city reporter

Actual behavior

Tests are run with standard reporter and following message have been reported:

react-scripts test --env=jsdom --teamcity
Unrecognized options: teamcity

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected):
   └── [email protected]
2. node -v:
   v5.1.0
3. npm -v:
   3.8.1

[wdhorton]

Because the react-scripts package is the one actually calling jest, it has its own jest config and doesn't get the config that you put in your package.json:

"jest": {
    "testResultsProcessor": "node_modules/jest-teamcity-reporter"
}

^^ That part doesn't get passed on to react-scripts. I'm not sure there's a way to make this work without ejecting.

[bondarewicz]

Any recommendations to allow passing reporter config into react-scripts ?
I could not find anything related on roadmap, shall this be considered?

[brentatkins]

+1 for this.

I've just run into the exact same problem. Tried messing about with the createJestConfig file in react-scripts, but that executes jest in its own note_modules folder and isn't aware of any dependencies at the project root.

I'd rather not have to eject the app, but I don't see any other choice.

[dvkndn]

Hey guys, have you think about creating a fork version of react-scripts for this use case? It is documented here https://github.com/facebookincubator/create-react-app/pull/779

(It is not actually a finished document, as there are many tricks to make it works for now, but it do works anyway)

[federicobarera]

I just had a go and it worked fine.
navigate to the project root and:

1. npm install jest
2. npm install jest-teamcity-reporter

3. added:
   "jest": { "testResultsProcessor": "jest-teamcity-reporter" }

4. created a npm script:
   "scripts": { "ci": "jest" }

Then, please read from their npm page:

The reporter is only active when the environment variable TEAMCITY_VERSION is present

Therefore

5.
SET TEAMCITY_VERSION=1
npm run ci

Result:

[email protected] ci C:\Users\Federico\Work\Samples\r2
jest

PASS src\App.test.js
√ renders without crashing (4ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.462s
Ran all test suites.

teamcity[testSuiteStarted name='src/App.test.js']

teamcity[testStarted name='renders without crashing']

teamcity[testFinished name='renders without crashing' duration='4']

teamcity[testSuiteFinished name='src/App.test.js' duration='802']`

[mikebridge]

When I added jest.testResultsConfigurator directly to my package.json file it interfered with my test compilation, so I removed it and added a parameter to the test-runner script instead:

"scripts": {
    "test:teamcity": "react-scripts test --env=jsdom --testResultsProcessor=jest-teamcity-reporter"
}

Or the create-react-app-typescript equivalent:

"scripts": {
    "test:teamcity": "react-scripts-ts test --env=jsdom --testResultsProcessor=jest-teamcity-reporter"
}

[bondarewicz]

@mikebridge would you mind sharing your setup steps?

[mikebridge]

@bondarewicz When I was debugging it, the only thing I did apart from adding that script immediately after creating the app was to set the environment variable "CI" on the teamcity agent. That works for me both with TypeScript and JavaScript.

[gaearon]

This is configurable in the next version.
https://github.com/facebookincubator/create-react-app/pull/1830

[gaearon]

Please help beta test the new version that includes this change!
https://github.com/facebookincubator/create-react-app/issues/2172

[brentatkins]

I don't think this issue is closed by #1830

Outputting Jest results to TeamCity requires overriding the testResultsProcessor config. PR #1830 only deals with jest configuration around coverage, and does not include testResultsProcessor

I managed to getting it working using the solution listed by @mikebridge

[gaearon]

Ah good point, sorry. Missed that.
I do think command line option is better for this because you don't want it locally anyway.

[dominicscimeca]

@gaearon Why is this closed? Should there be another issue to track this? Because @mikebridge's solution does not currently work. And the pull request and new version don't address this either.
I looked through the code and could not even see how @mikebridge's solution would work. maybe in a previous version of react scripts.

[mikebridge]

@dominicscimeca I just upgraded and it is now broken for me too.

[gaearon]

Why is this closed? Should there be another issue to track this? Because @mikebridge's solution does not currently work.

It is closed because nobody reported it was broken 😉
Now that you reported, I am reopening.

I expect the solution in https://github.com/facebookincubator/create-react-app/issues/882#issuecomment-292662719 to work.
If it doesn't, it would be great if you (or somebody else) could look into why it broke.

Thanks!

[gaearon]

Tagging as needing contributions. Need to look into why this broke.

[dominicscimeca]

@gaearon Actually I am looking into just submitting a pull request. So no worries there. Thank you for all your hard work. And the request would be to have the package json option work.
"jest": { "testResultsProcessor": "jest-teamcity-reporter" }
Not to fix commandline. This would build on the work from https://github.com/facebookincubator/create-react-app/pull/1830.
Seems better. Is that agreed?

[gaearon]

The one part I'm confused about: wouldn't that break local watcher? Since I'd expect that "processor" to kick in for local npm test as well.

If it would break the local watcher, the CLI solution seems preferable. If not, I'm cool with making it configurable in the Jest object.

[federicobarera]

Guys this is not broken...

The configuration :

"jest": { "testResultsProcessor": "jest-teamcity-reporter" }

already works.
Just make sure you have the following env:

env.CI = true env.TEAMCITY_VERSION = 1

[gaearon]

In either case, we need to figure out if passing CLI arguments broke. It's pretty important for us to keep it working.

[mikebridge]

@dominicscimeca Now that github is back up I can see that the command-line solution still works ok for me after the upgrade---my problem was elsewhere. I had configured options under jest which were no longer permitted.

[dominicscimeca]

@federicobarera The reason yours works is because you are calling jest directly
"scripts": { "ci": "jest" }
thus skipping react-scripts entirely. But then of course loosing the benefits of react-scripts. So this is an issue with react-scripts. If you just want to use jest directly of course it will work.

@gaearon this is a very good point about locally using the package json. Maybe CLI is the best way.

@mikebridge I will check to see what versions I am using and maybe upgrading will resolve the issue.

[dominicscimeca]

@gaearon @mikebridge I really have to apologize. The CLI works completely fine. I was just on an old version of react-scripts.

[denistsoi]

think this should be closed @gaearon - @dominicscimeca reported that it seems to be running fine