为什么 jest.spyOn 找不到我的组件功能？

Question

假设我有这个简单的 React (TypeScript) 组件：

function Header(): JSX.Element {
   const initialItemIndex = useInitialItemIndex();
   const [currentItem, setCurrentItem] = useState(initialItemIndex);

   function onChangeFunc(event: Event, itemNum: number): void {
       setCurrentItem(itemNum);
   }

   return (
      <div>
         <Tabs value={currentTab} onChange={onChangeFunc}>
            <Tab label="A" />
            <Tab label="B" />
         </Tabs>
      </div>
   );
}

我想测试（Jest，TypeScript）Tabs.onChange 正在调用onChangeFunc。我应该如何测试它？比如：

const wrapper = shallow(<Header />);
const spyFunc = jest.spyOn(Header, 'onChangeFunc');
wrapper.find('Tabs').simulate('change');
expect(spyFunc).toBeCalled();

我收到错误，关于 spyOn 中的第二个参数：

TS2345: Argument of type '"onChangeFunc"' is not assignable to parameter of type 'never'.

我做错了什么？

Answer 1

正如@jonrsharpe 所说，onChangeFunc 在Header SFC 中定义，它是私​​有的。我们无法访问它，因此我们无法监视它。您应该通过触发change 事件来测试它。

例如

index.tsx:

import React from 'react';

export const Tabs = ({ onChange, children }) => <select onChange={onChange}>{children}</select>;
const Tab = ({ label }) => <option value={label}>{label}</option>;

export function Header(): JSX.Element {
  function onChangeFunc(event: Event, tab: number): void {
    console.log('onchange');
  }

  return (
    <div>
      <Tabs onChange={onChangeFunc}>
        <Tab label="A" />
        <Tab label="B" />
      </Tabs>
    </div>
  );
}

index.test.tsx:

import { Header } from './';
import React from 'react';
import { mount } from 'enzyme';

describe('60927553', () => {
  it('should pass', () => {
    const logSpy = jest.spyOn(console, 'log');
    const wrapper = mount(<Header></Header>);
    const mEvent = {};
    wrapper.find('select').simulate('change', mEvent);
    expect(logSpy).toBeCalledWith('onchange');
  });
});

100% 覆盖率的单元测试结果：

 PASS  stackoverflow/60927553/index.test.tsx (7.617s)
  60927553
    ✓ should pass (57ms)

  console.log node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866
    onchange

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.86s, estimated 9s