How to update Jest code coverage settings?

Get Help and Help Others
1

I’m trying to update Jest settings for code coverage, but I get validation warnings when I do so:

‡ yarn rw test --no-watch --collect-coverage
● Validation Warning:

  Unknown option "coverageReporters" with value ["html"] was found.
  This is probably a typing mistake. Fixing it will remove this message.

  Configuration Documentation:
  https://jestjs.io/docs/configuration

● Validation Warning:

  Unknown option "collectCoverageFrom" with value ["**/*.{js,jsx,ts,tsx}", "!**/*stories.tsx", "!**/dist/**"] was found.
  This is probably a typing mistake. Fixing it will remove this message.

  Configuration Documentation:
  https://jestjs.io/docs/configuration

I updated web/jest.config.js to look like this:

/** @type {import('jest').Config} */
const config = {
  rootDir: '../',
  preset: '@redwoodjs/testing/config/jest/web',
  setupFilesAfterEnv: ['<rootDir>/web/jest.setup.js'],
  coverageReporters: ['html'],
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*stories.tsx',
    '!**/dist/**',
  ],
  slowTestThreshold: 15,
  displayName: {
    color: 'cyan',
    name: 'www',
  },
};

Notice that slowTestThreshold and displayName aren’t flagged as validation warnings, only the config values used for code coverage. And slowTestThreshold and displayName both are recognized and affect Jest as expected, so this does seem the right place for placing overridden configuration.

I’m admit I’m reasonably new to Redwood, but this seems like it should be fairly straightforward. What am I missing here?

2

Hmm, although I’m not sure if html is valid, the “…Unknown option…” has me scratching my head. Maybe there’s some kind of collision happening in the case of collectCoverageFrom. Not so sure about coverageReporters. Here’s the base config:

To be clear, you should be able to modify jest.config.js

As you can see, under the hood there’s a lot of custom Jest config across Web and API. The advantages are that you get up and running immediately. The disadvantage is that config customization is cumbersome and sometime Jest CLI options are unintentionally not supported with the Redwood command.

Here’s the code for the rw test command itself. Maybe there’s something missing from the command itself (e.g. option not correctly passed)?

Regarding the challenges of customizing config, here are a couple links:

3

I’d found jest-preset.js and testHandler.js before I opened this thread but didn’t see anything that explained what I’m seeing. Looking more closely at testHandler.js though I notice that on line 105 it is using --collectCoverage as an argument to jest where I believe --coverage is actually correct. Didn’t seem to change the behavior, though, when I tweaked the file to change it so Jest must allow either.

I have discovered something interesting, though: I only get the validation error when I run both projects at the same time. Executing just the web tests has this run without error and picks up my desired change for coverage! So there is something magic in the configuration about both the api and web sides being tested at once that causes Jest to freak out and give an incorrect validation message.

Which does lead me to a workaround, although kind of awkward: I run the test command twice, once for each side, and in the respective projects add a coverageDirectory entry to jest.config.js that separates the results. Clumsy, but it does appear to work.

Hopefully this will give someone with more RedwoodJS savvy than me a clue!

4

Ah, very interesting. This reminds me of another issue that’s been reported where yarn rw test breaks in the context of CI. But running separate yarn rw test api and ...test web works just fine. (Note: couldn’t find the issue but I think @asher-eastham reported it.)

Must be unintentionally combing the separate web and api config.

Additionally, is does seem like the rw test command itself is not making use of the custom config.

Saw the link to GitHub Issue. Adding here to keep things in sync: