如何改进 ReactJS 项目的 Jest 代码覆盖率并为 components 文件夹配置它

如何解决如何改进 ReactJS 项目的 Jest 代码覆盖率并为 components 文件夹配置它

我有一个用 Jest 配置的 React 包进行测试。在构建或向项目结构添加新组件/元素时，我总是遇到 Jest 覆盖问题。每次，作为周转，我都会减少 Jest 的覆盖范围以促进成功构建。但多亏了多次迭代构建，我的 Jest 阈值降到了历史最低水平。

这是我的 jest.config.js 文件：

module.exports = {
  collectCoverage: true,collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}','!src/index.{js,'!src/metrics.ts','!src/**/*.d.ts'
  ],coverageReporters: [
    'text','html','cobertura','json-summary',],coverageThreshold: {
    global: {
      lines: 42,statements: 43,functions: 22,branches: 42,},"./src/components/": {
      "branches": 40,"statements": 40
    },globals: {
    SERVER_MODE: 'test'
  },moduleNameMapper: {
    '^src/(.*)$': '<rootDir>/src/$1',"\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
  },setupFilesAfterEnv: ['jest-enzyme'],testEnvironment: 'enzyme',testEnvironmentOptions: {
    enzymeAdapter: 'react16'
  },testMatch: ['**/test/unit-tests/**/*.{js,tsx}'],transform: {
    '\\.[jt]sx?$': 'babel-jest','\\.(s?css|jpe?g|png|gif|eot|otf|webp|svg|ttf|woff2?|mp[34]|webm|wav|m4a|aac|oga)$': 'jest-transform-stub'
  },};

这是我配置的简单单元测试之一： AppTest.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from 'src/components/App';

describe('App',() => {
    it('renders without crashing',() => {
        const div = document.createElement('div');
        ReactDOM.render(<App />,div);
        ReactDOM.unmountComponentAtNode(div);
    });
});

我不确定如何增加我的 Jest 覆盖率，但正如您所看到的，我已将组件减少到 22%，这是相当低的。我的 components/ 文件夹与常规组件文件夹非常相似：Navbar、Routes、HomePage 等。