Reactjs WebStorm中的某些文件的代码覆盖率不起作用

我想为下面的目标代码编写一个UT：

// dev code
import React, { useState } from 'react'
import { Dropdown } from 'antd'

import './style.scss'
import classnames from 'classnames'
import Menu from '@lib/Menu'

const DEFAULT_TRIGGER_MODE = 'contextMenu'

interface ContextMenuProps {
  wrapClass?: string
  menu?: { key: string; title: string }[]
  children?: object
  updateMenu?: (event) => { key: string; title: string }[]
  visible?: boolean
  triggerMode?: ('click' | 'hover' | 'contextMenu')[]
}

const updateMenuData =(eventObj, updateMenu, setMenu) => {
  if (updateMenu) {
    const newMenu = updateMenu(eventObj)
    setMenu(newMenu)
  }
}

const populateMenuNodes = (menuData) => {
  if (menuData.length === 0) return <></>

  return (
    <Menu>
      {menuData.map(({ key, title, onClick, disabled }, index) => (
        key === 'menu.divider' ? <Menu.Divider key={key} /> : <Menu.Item key={key} onClick={onClick} disabled={disabled}>{title}</Menu.Item>
      ))}
    </Menu>
  )
}

const ContextMenu: React.FC<ContextMenuProps> = (props) => {
  const [menu, setMenu] = useState(props.menu || [])
  const { children, updateMenu, wrapClass, triggerMode = [DEFAULT_TRIGGER_MODE], ...rest } = props
  return (
    <div
      className={classnames('mstr-as-context-menu', wrapClass)}
      onContextMenu={(e) => {
        updateMenuData(e, updateMenu, setMenu)
      }}
    >
      <Dropdown overlay={populateMenuNodes(menu)} trigger={triggerMode} {...rest}>
        {children}
      </Dropdown>
    </div>
  )
}

export default ContextMenu

//开发代码
从“React”导入React，{useState}
从“antd”导入{Dropdown}
导入“./style.scss”
从“classnames”导入类名
从“@lib/Menu”导入菜单
const DEFAULT_TRIGGER_MODE='contextMenu'
接口上下文uprops{
wrapClass？：字符串
菜单？：{key:string；title:string}[]
儿童？：对象
UpdateNu？：（事件）=>{key:string；title:string}[]
可见？：布尔值
triggerMode？：（“单击”“悬停”“上下文菜单”）[]
}
const updateMenuData=（eventObj、updateMenu、setMenu）=>{
如果（更新）{
const newMenu=updateMenu（eventObj）
设置菜单（新建菜单）
}
}
常量populateMenuNodes=（menuData）=>{
if（menuData.length==0）返回
返回(
{menuData.map（{key，title，onClick，disabled}，index）=>(
键=='菜单.分隔符'？：{title}
))}
)
}
const ContextMenu:React.FC=（道具）=>{
const[menu，setMenu]=useState（props.menu | |[]）
const{children，updateMenu，wrapClass，triggerMode=[DEFAULT\u TRIGGER\u MODE]，…rest}=props
返回(
{
updateMenuData（e、updateMenu、setMenu）
}}
>
{儿童}
)
}
导出默认上下文菜单

我已经为上面的目标代码编写了一个UT：

import React from 'react'
import {  shallow } from 'enzyme'
import ContextMenu from '../index'

jest.mock('react', () => ({
    ...jest.requireActual('react'),
    useState: jest.fn((menu) => [menu || []]),
}))

describe('ContextMenu/index.js', () => {
    let component
    let props
    beforeEach(() => {
        props = {
            children: <div>Children</div>,
        }
    })

    describe('Check rendered component: ', () => {
        it('should render a component successfully', () => {
            component = shallow(<ContextMenu {...props}/>)
        })
        it('should show Menu.Item', () => {
            props = {
                ...props,
                 menu: [{key: '', title: 'title1'}]
            }
            component = shallow(<ContextMenu {...props}/>)
        });
        it('should show Menu.Divider', () => {
            props = {
                ...props,
                menu: [{key: 'menu.divider', title: 'title1'}]
            }
            component = shallow(<ContextMenu {...props}/>)
        });
        afterEach(() => {
            expect(component).toMatchSnapshot()
        })
    })
})

从“React”导入React
从“酶”导入{shall}
从“../index”导入上下文菜单
mock（'react'，（）=>({
…开玩笑，要求反应（'react'），
useState:jest.fn（（菜单）=>[menu | |[]），
}))
描述（'ContextMenu/index.js'，（）=>{
let组件
让道具
在每个之前（（）=>{
道具={
儿童:儿童,，
}
})
描述（'检查渲染组件：'，（）=>{
它（'应该成功呈现组件'，（）=>{
组件=浅（）
})
它（'应该显示菜单项'，（）=>{
道具={
…道具，
菜单：[{键：''，标题：'title1'}]
}
组件=浅（）
});
它（'应该显示Menu.Divider'，（）=>{
道具={
…道具，
菜单：[{key:'menu.divider'，title:'title1'}]
}
组件=浅（）
});
之后（（）=>{
expect（component.toMatchSnapshot（））
})
})
})

我成功地运行了测试

但是，我无法使用下面WebStorm的代码覆盖率特性获取目标代码的覆盖率数据

从下面的屏幕截图来看，WebStorm似乎不计算目标代码的代码覆盖率，而计算其他文件的代码覆盖率

---

我是提出这个问题的人

调查 我在终端中运行下面的命令，发现没有为相同的文件计算代码覆盖率

jest --coverage

因此，这不是关于WebStorm的具体问题。这只是一个关于Jest配置的问题

解决方案 查找Jest配置文件：Jest.config.js

module.exports = {
  verbose: true,
  testMatch: ['<rootDir>src/**/*\\.test\\.(ts|tsx|js|jsx)'],
  globals: { __DEV__: true },
  modulePaths: ['./src'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
  moduleNameMapper: {
    '\\.(css|less|scss|gif)$': 'identity-obj-proxy',
    '^.+\\.(css|scss)$': '<rootDir>/node_modules/jest-css-modules',
    '\\.(css|less|scss|sass|gif)$': 'identity-obj-proxy',
    '^antd/es': 'identity-obj-proxy',
    '^@mstr/': 'identity-obj-proxy',
    '^dnd-core$': 'dnd-core/dist/cjs',
    '^react-dnd$': 'react-dnd/dist/cjs',
    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy',
  },
  testResultsProcessor: './scripts/jest-results-processor.js',
  coverageReporters: ['lcov', 'text', 'json-summary', 'cobertura'],
  setupFiles: ["jest-canvas-mock"],
  setupFilesAfterEnv: ['./jest.setup.js'],
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/assets/**/*.{js,jsx,json,ts,tsx}',
    '!src/lib/!(Canvas)/**/*.{js,jsx,json,ts,tsx}',
    '!**/node_modules/**',
    '!**/vendor/**',
    '!**/env/**',
  ],
  testPathIgnorePatterns: ['<rootDir>/src/components/xx/__tests__/data'],
  snapshotSerializers: ['enzyme-to-json/serializer'],
}

将此行更改为：

    'src/lib/**/*.{js,jsx,json,ts,tsx}',

因此，将计算

lib

目录下所有文件（包括我正在处理的文件）的代码覆盖率

    'src/lib/**/*.{js,jsx,json,ts,tsx}',