Como usar jest.spyOn com o componente de função React usando Typescript

Estou desenvolvendo um aplicativo React usando Typescript e hooks, e estou tentando usar Enzyme with Jest para testar os componentes da função. Não consigo usar jest.spyOn para testar um método em meu componente. O método jest.spyOn não resolve corretamente e mostra a seguinte mensagem ao passar o mouse

"Argumento do tipo '" validateBeforeSave "' não pode ser atribuído ao parâmetro do tipo '" contexto "|" setState "|" forceUpdate "|" render "|" componentDidMount "|" shouldComponentUpdate "|" componentWillUnmount "|" componentDidCatch "|" getSnapshotBeforeUpdate "| ... 6 mais ... |" UNSAFE_componentWillUpdate "'. ts (2345)"

Tentei lançar a instância como 'Qualquer' -

const instance = wrapper.instance() as any;

Isso, obviamente, ignora o problema em tempo de compilação, mas o teste gera um erro de tempo de execução de que a função não existe no componente.

Não é possível espiar a propriedade validateBeforeSave porque ela não é uma função; undefined dado ao invés

// Some function Component

const SomeComponent = (props: IMyComponentProps) => {
  const { classes } = props;

  // Component has state
  const [count, setCount] = useState(0);

  function validateBeforeSave(){

  }

  function handleClick() {
  validateBeforeSave();
  .
  .
  .
  }

  return (
   <div>
      <Button>
      className="saveBtn"
      onClick={handleClick}
      </Button>
    </div>
  );

  };

  // Unit test
  describe('SomeComponent' () => {
  it('validates model on button click', () => {
      const wrapper = mount(
        <MuiThemeProvider theme={theme}>
          <SomeComponent/>
        </MuiThemeProvider>,
      );
  const instance = wrapper.instance();
      const spy = jest.spyOn(instance, "validateBeforeSave");
  wrapper
        .find('.saveBtn')
        .at(0)
        .simulate('click');
      expect(spy).toHaveBeenCalledTimes(1);
    });
  }

O que estou perdendo aqui? Como o spyOn funciona com componentes de função?

Eu criei o aplicativo usando o modelo create-react-app e ele tem essas dependências para pacotes de teste

"devDependencies": {
    "ts-jest": "^23.10.3",
    "@types/jest": "24.0.9",
    "@types/enzyme": "^3.9.1",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2",
    "enzyme-to-json": "^3.3.5",
  }

Postando meu comentário aqui novamente para responder à sua pergunta: Sua validateBeforeSavefunção é declarada dentro, SomeComponenttornando-a uma função de escopo fechado / privado não acessível fora. Você pode passar essa função como um prop e você pode então criar spy e passá-lo como um valor prop em seu teste e testar se a função prop passou (spy) foi chamada ou não

Portanto, você modificaria sua função mais ou menos assim:

// some validator function
function validateBeforeSave(){
  ...
}

// Some function Component

const SomeComponent = (props: IMyComponentProps) => {
  const { classes, validateBeforeSave } = props;

  // Component has state
  const [count, setCount] = useState(0);


  function handleClick() {
  validateBeforeSave();
  .
  .
  .
  }

  return (
   <div>
      <Button>
      className="saveBtn"
      onClick={handleClick}
      </Button>
    </div>
  );

};

E em seu teste de unidade, algo assim:

  // Unit test
  describe('SomeComponent' () => {
  it('validates model on button click', () => {
      const validateSpy = jest.fn();
      const wrapper = mount(
        <MuiThemeProvider theme={theme}>
          <SomeComponent validateSpy={validateSpy}/>
        </MuiThemeProvider>,
      );
      const instance = wrapper.instance();
      wrapper
        .find('.saveBtn')
        .at(0)
        .simulate('click');
      expect(validateSpy).toHaveBeenCalledTimes(1);
    });
  }

Eu também estava enfrentando o mesmo problema - gostei abaixo -

import * as React from 'react';

const SampleComponent = () => {
  const sampleMethod = () => {
    console.log('hello world');
  };

  return <button onClick={sampleMethod} type="button">Click Me</button>;
};

export default SampleComponent;

teste -

import React from 'react';
import SampleComponent from './';
import { shallow } from 'enzyme';

describe('SampleComponent', () => {
  test('should handle click correctly', () => {
    const logSpy = jest.spyOn(console, 'log');
    const wrapper = shallow(<SampleComponent></SampleComponent>);
    const button = wrapper.find('button');
    expect(button.text()).toBe('Click Me');
    button.simulate('click');
    expect(logSpy).toBeCalledWith('hello world');
  });
});

Podemos espionar console.log, para afirmar que ele deve ser chamado ou não

Verifica - https://stackoverflow.com/a/58637912/10734622