Почему jest.spyOn не находит мою компонентную функцию? - PullRequest
Новая
       72

Почему jest.spyOn не находит мою компонентную функцию?

0 голосов
/ 30 марта 2020

Допустим, у меня есть этот простой компонент 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'.

Что я делаю не так?

1 Ответ

0 голосов
/ 31 марта 2020

Как сказал @jonrsharpe, onChangeFunc, определенный внутри Header SF C, является личным. Мы не можем получить к нему доступ, чтобы не могли шпионить за ним. Вы должны проверить это, вызвав событие 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
...