Jest 的 setupFilesAfterEnv setupFile 不会被 VSCode IDE 读取，除非它实际打开了

Question

我创建了一个最小的存储库来重现此问题。如果您有时间，请尝试一下：https://github.com/Danielvandervelden/jest-error-minimal-repro

除了 VSCode 之外我没有尝试过任何其他编辑器

---

我正在努力让它发挥作用。我就直接进入正题吧。这是我的 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"]
};

最重要的是

setupFilesAfterEnv

，你可以看到它指向

setupTests.ts

，它确实位于我项目的根目录中，如下所示：

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

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

极其简单、简洁。最重要的行是

import

的

@testing-library/jest-dom

语句，因为这会启用

expect().toBeInTheDocument()

，我们在许多不同的测试文件中使用它。

我正在使用一个配置，其中我有一个单独的

tsconfig.json

用于

*.test.tsx?

文件和普通

*.tsx?

文件。这是

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"]
}

仅供参考，这是常规的

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"]
}

现在问题如下，我做了一个很简单的测试：

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

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

每当我的

setupTests.ts

打开时，我的 IDE 就可以看到我们

import

里面的

@testing-library/jest-dom

包，我们就没有问题。

toBeInTheDocument()

的定义非常好。然而，当我们close这个文件时，突然所有的

toBeInTheDocument()

函数调用都会出现红色下划线并出现以下错误：

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

然后，当我打开备份的

setupTests.ts

文件时，它可以完美地工作并且可以识别类型！显然，如果我只是

import

使用

@testing-library/jest-dom

的每个测试文件中的

.toBeInTheDocument()

，这个错误就会消失，但这违背了拥有

setupTests.ts

文件的全部目的。

测试通过得很好，这纯粹与 IDE 相关。

更奇怪的事情是有时当我在VSCode中

reload window

而没有打开

setupTests.ts

时，它可以工作。但突然间，它又停止工作了。

Answer 1

尝试稍微修改一下tsconfig.json：

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