WebStorm中的某些文件的代码覆盖率无效

如何解决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,wrapClass,triggerMode = [DEFAULT_TRIGGER_MODE],...rest } = props
  return (
    <div
      className={classnames('mstr-as-context-menu',wrapClass)}
      onContextMenu={(e) => {
        updateMenuData(e,setMenu)
      }}
    >
      <Dropdown overlay={populateMenuNodes(menu)} trigger={triggerMode} {...rest}>
        {children}
      </Dropdown>
    </div>
  )
}

export default ContextMenu

我已经为上面的目标代码编写了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',menu: [{key: 'menu.divider',title: 'title1'}]
            }
            component = shallow(<ContextMenu {...props}/>)
        });
        afterEach(() => {
            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,json,'!src/lib/!(Canvas)/**/*.{js,'!**/node_modules/**','!**/vendor/**','!**/env/**',],testPathIgnorePatterns: ['<rootDir>/src/components/xx/__tests__/data'],snapshotSerializers: ['enzyme-to-json/serializer'],}

关键是下面的代码

'!src/lib/!(Canvas)/**/*.{js,

将此行更改为：

    'src/lib/**/*.{js,

因此将计算lib目录下所有文件（包括我正在处理的文件）的代码覆盖率。