Блог

есть ли в любом случае возможность модульного тестирования функции в функциональном компоненте react. Поскольку wrapper.instance() для функциональных компонентов будет возвращено значение null, каков наилучший способ включить эту функцию в тест, чтобы получить максимальный охват.

 
const SimpleFC: React.FC = () => {

    const callbackFunction = () => {
        // Do Stuffs
    }

    return (
        <ChildComponent callback={callbackFunction} />
    )
}

export { SimpleFC };
 

В этом сегменте кода как мы можем вызвать callbackFunction ?

Заранее спасибо

Поскольку вы используете wrapper.instance() API, я произвольно думаю, что вы используете enzyme библиотеку. Вы можете использовать .invoke(invokePropName)(…args) => Любой> метод для ChildComponent прямого вызова функции.

Напр.

SimpleFC.tsx :

 import React from 'react';
import ChildComponent from './ChildComponent';

const SimpleFC: React.FC = () => {
  const callbackFunction = () => {
    // Do Stuffs
    console.log('Do Stuffs');
  };

  return <ChildComponent callback={callbackFunction} />;
};

export { SimpleFC };
 

ChildComponent.tsx :

 import React from 'react';

export default function ChildComponent({ callback }) {
  return <div onClick={callback}>child component</div>;
}
 

SimpleFC.test.tsx :

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

describe('67774847', () => {
  it('should pass', () => {
    const logSpy = jest.spyOn(console, 'log');
    const wrapper = shallow(<SimpleFC />);
    wrapper.invoke('callback')();
    expect(logSpy).toBeCalledWith('Do Stuffs');
    logSpy.mockRestore();
  });
});
 

результат теста:

  PASS  examples/67774847/SimpleFC.test.tsx (8.752 s)
  67774847
    ✓ should pass (48 ms)

  console.log
    Do Stuffs

      at console.<anonymous> (node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866:25)

--------------------|---------|----------|---------|---------|-------------------
File                | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------|---------|----------|---------|---------|-------------------
All files           |      90 |      100 |   66.67 |      90 |                   
 ChildComponent.tsx |   66.67 |      100 |       0 |   66.67 | 4                 
 SimpleFC.tsx       |     100 |      100 |     100 |     100 |                   
--------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.654 s