Jest's setupFilesAfterEnv setupFile doesn't get read by VSCode IDE unless it's actually open

Question

I've created a minimal repo where this issue is reproduced. If you have time, try it out: https://github.com/Danielvandervelden/jest-error-minimal-repro

I have not tried any other editor than VSCode

---

I'm struggling to get this to work. I'll get directly to the point. Here's my jest.config.js:

module.exports = {
  clearMocks: true,
  coverageReporters: ["lcov"],
  moduleNameMapper: {
    "\\.(scss)$": "identity-obj-proxy"
  },
  modulePathIgnorePatterns: ["/cypress", ".yalc"],
  preset: "ts-jest",
  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
  testEnvironment: "jest-environment-jsdom",
  testResultsProcessor: "jest-sonar-reporter",
  transform: {
    "^.+\\.tsx?$": [
      "ts-jest",
      {
        tsconfig: "tsconfig.jest.json",
        diagnostics: false
      }
    ],
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  watchPlugins: ["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"]
};

The most important one is the setupFilesAfterEnv, as you can see it points to setupTests.ts which indeed lives in the root directory of my project and looks like this:

import "@testing-library/jest-dom";

jest.mock("react-i18next", () => ({
  useTranslation: () => ({ t: (key: string) => key }),
  Trans: (stringToTranslate: string) => stringToTranslate,
  initReactI18next: {
    type: "3rdParty",
    init: jest.fn()
  }
}));

Extremely simple and concise. The most important line is the import statement for @testing-library/jest-dom since this enables expect().toBeInTheDocument(), which we use in many different test files.

I'm using a config where I have a separate tsconfig.json for *.test.tsx? files and normal *.tsx? files. Here's the tsconfig.jest.json:

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }],
    "target": "ESNext",
    "lib": ["dom", "ESNext"],
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "outDir": "./dist/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.test.ts", "src/**/*.test.tsx", "setupTests.ts"]
}

And just for information's sake, here's the regular tsconfig.json:

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }],
    "target": "ESNext",
    "lib": ["dom", "ESNext"],
    "jsx": "react",
    "module": "ESNext",
    "types": ["node", "./types.d.ts"],
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "outDir": "./dist/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
}

Now the issue is as follows, I have a very simple test:

describe("component", () => {
 it("should render children if no error is thrown", () => {
    const { getByText } = render(
      <MicrofrontendErrorBoundary>
        <ThrowComponent />
      </MicrofrontendErrorBoundary>
    );

    expect(getByText("An error occurred!")).toBeInTheDocument();
  });
});

Whenever my setupTests.ts is open, and my IDE can see that we import the @testing-library/jest-dom package inside of it we have no problem. toBeInTheDocument() is defined perfectly fine. However, when we close this file, all of a sudden all of the toBeInTheDocument() function calls get red underlines and errors out with the following error:

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.ts(2339)

Then when I open the setupTests.ts file back up, it works flawlessly and it can recognize the types! Obviously this error will go away if I just import the @testing-library/jest-dom inside of every single test file that uses .toBeInTheDocument() but this defeats the whole purpose of having a setupTests.ts file.

Tests are passing just fine, this is purely IDE related.

The even weirder thing is sometimes when I reload window in VSCode without having setupTests.ts open, it works. But then out of nowhere, it stops working again.

Answer 1

I had a look in you repo and got that ts error as well. Try to modify tsconfig.json a little bit:

  ...
  "types": ["node", "./types.d.ts", "@testing-library/jest-dom"],
  ...

UPD: Forgot to mentioned that I also deleted that line from tsconfig.json:

"exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]

UPD: Both configs tsconfig.json and tsconfig.jest.json work correctly (npm test and tsc commands work correctly, both of them use own configs). The issue that IDE use only tsconfig.json for internal TS compilator and it renders errors in *.test.ts/tsx files.

There is just a proposal how use multi tsconfig.ts files based on folder structures - https://github.com/smlkA/jest-error-minimal-repro