Jest: "Directory in the roots[0] option was not found"

Question

I am trying to set up monorepo to run all of its Jest tests at once. In each package, I'm using react-app-rewired to get Babel to transpile code imported from other packages without ejecting from create-react-app, as described in this article.

react-app-rewired test succeeds when run from each package folder, but when run from the root folder of the monorepo, I get this error

Directory /Users/Me/go/src/gitlab.com/my-org/front-end/src in the roots[0] option was not found.

There is no src folder in my front-end folder (the monorepo root) and I can't figure out why Jest is trying to look there.

I've tried providing rootDir and roots in jest.config.js, but that doesn't seem to make a difference.

How can I get Jest to stop looking for a folder that doesn't exist?

jest.config.js (root):

module.exports = {
  rootDir: ["."],
  projects: [
    "<rootDir>/packages/app",
    "<rootDir>/packages/components",
    "<rootDir>/packages/utils",
  ],
};

package.json (root):

{
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "prettier": "prettier --check '**/*.js'",
    "prettier:fix": "prettier --write '**/*.js'"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

config-overrides.js (root):

const path = require("path");

const { override, babelInclude } = require("customize-cra");

module.exports = function (config, env) {
  return Object.assign(
    config,
    override(
      babelInclude([
        path.resolve("./packages/app"),
        path.resolve("./packages/components"),
        path.resolve("./packages/utils"),
      ])
    )(config, env)
  );
};

Answer 1

Create a folder name "/src" under your root folder where you have your package.json, then move all the __test__ folder under that.

This folder structure worked for me.

Answer 2

For me the following code in config-overrides.js worked.

module.exports = {
  jest: function(config) {
    config.collectCoverageFrom = ['client/**/*.{js,jsx,ts,tsx}', '!client/**/*.d.ts'];
    config.testMatch = [
      '<rootDir>/client/**/__tests__/**/*.{js,jsx,ts,tsx}',
      '<rootDir>/client/**/*.{spec,test}.{js,jsx,ts,tsx}',
    ];
    config.roots = ['<rootDir>/client'];
    return config;
  },

  // The paths config
  paths: function(paths, env) {
    paths.appIndexJs = path.resolve(__dirname, 'client/index.js');
    paths.appSrc = path.resolve(__dirname, 'client');
    return paths;
  },
};

I have renamed my src folder created by cra to client and added the path config part to reflect that. That on its own isn't enough, hence the jest part. Just config your paths to reflect your own structure.