Create-react-app: Allow configuring reporters for Jest

Created on 5 Jun 2017  Â·  13Comments  Â·  Source: facebook/create-react-app

Would it be possible to add functionality to configure custom reporters for Jest, without doing an eject?

This kind of functionality is already implemented for coverage tools https://github.com/facebookincubator/create-react-app/issues/1785

My use case: I am running builds in Jenkins, and I would like to create JUnit XML formatted test reports so that the test results are nicely integrated with Jenkins UI.

I tried using this: https://www.npmjs.com/package/jest-junit and configured package.json like this

"jest": {
  "testResultsProcessor": "./node_modules/jest-junit"
}

The end result is this:

Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • snapshotSerializers.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • testResultsProcessor

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

There is another reporter package that is seems to do similar thing: https://github.com/michaelleeallen/jest-junit-reporter

Most helpful comment

You should be able to pass it as a command line option. Since it doesn't seem to make sense for non-CI runs, you might as well do it like this:

  "test": "react-scripts test",
  "test:ci": "react-scripts test --testResultsProcessor ./node_modules/jest-junit",

and then set your CI server to run npm run test:ci.

Hope this helps!

All 13 comments

You should be able to pass it as a command line option. Since it doesn't seem to make sense for non-CI runs, you might as well do it like this:

  "test": "react-scripts test",
  "test:ci": "react-scripts test --testResultsProcessor ./node_modules/jest-junit",

and then set your CI server to run npm run test:ci.

Hope this helps!

After little bit experimentation, the correct command seems to be this. No need for -- parameter. Thanks!

"test:ci": "react-scripts test --testResultsProcessor ./node_modules/jest-junit",

Thanks. I edited my comment.

This seems to work, only if I put the absolute path for the ./node_module/jest-junit. So, I had to define:

"test:ci": "react-scripts test --testResultsProcessor `pwd`/node_modules/jest-junit",

Now it works :-)

(I tried this with react-scripts 0.9.5 with nodejs 6.11.2)

I'm trying to use the CLI option from jest-junit as mentioned by @gaearon above, but it looks like testResultsProcessor is about to deprecate and eventually, remove from Jest. Source: https://github.com/jest-community/jest-junit/issues/56#issuecomment-398352330

Are there any other ways that we can make the reporter works without ejecting CRA?

@konekoya
"test:ci": "react-scripts test --env=jsdom --reporters=default --reporters=jest-junit",

Wow! Thank you @jamime, you just made my day!

Good one @jamime. Do we think this should be included in the documentation?

@gaearon could reporters be added here for "parity" with coverageReporters? That's the only thing I had to pass by the command line. By what key were the first 4 fields to pass along chosen? And on what grounds was merging the config object discounted? To me that looks like an easier solution all around so I am probably missing some downsides there.

Sad times

image

image

@QuantumInformation I feel your pain, that's why I made all Jest options configurable when you use craco to customize your CRA installation without ejecting.

An overview of the configuration is available here.

Sample craco.config.js file:

module.exports = {
    jest: {
        configure: {
             reporters: ["<rootDir>/my-custom-reporter.js"]
        }
    }
};

I've unlocked this as per #6224.

If there are some proposals for how we could deal with this, I think it's worth reopening this issue - as the workaround no longer works (from what I read above).

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alleroux picture alleroux  Â·  3Comments

AlexeyRyashencev picture AlexeyRyashencev  Â·  3Comments

alleroux picture alleroux  Â·  3Comments

dualcnhq picture dualcnhq  Â·  3Comments

barcher picture barcher  Â·  3Comments