Reactjs 单元测试功能组件&x27；s函数

我们是否可以在react功能组件中对功能进行单元测试。由于

wrapper.instance（）

将为功能组件返回null，因此在测试中包含此函数以获得最大覆盖率的最佳方法是什么

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

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

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

export { SimpleFC };

常量SimpleFC:React.FC=（）=>{
const callbackFunction=（）=>{
//做事
}
返回(
)
}
导出{SimpleFC}；

在这个代码段中，我们如何调用

callbackFunction

---

提前感谢

通过您使用的

wrapper.instance（）

API，我武断地认为您使用的是

enzyme

库。您可以使用方法直接调用

ChildComponent

上的函数prop

例如

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 };

import React from 'react';

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

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();
  });
});

SimpleFC.test.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 };

import React from 'react';

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

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();
  });
});

import{shall}来自“酶”；
从“React”导入React；
从“/SimpleFC”导入{SimpleFC}；
描述（'67774847'，（）=>{
它（'应该通过'，（）=>{
constlogspy=jest.spyOn（控制台，'log'）；
常量包装器=浅（）；
invoke（'callback'）（）；
expect（logSpy）.toBeCalledWith（'dostuff'）；
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

通过示例/67774847/SimpleFC.test.tsx（8.752秒）
67774847
✓ 应通过（48毫秒）
console.log
做事
在控制台。（node_modules/jest环境酶/node_modules/jest mock/build/index.js:866:25）
--------------------|---------|----------|---------|---------|-------------------
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s
--------------------|---------|----------|---------|---------|-------------------
所有文件| 90 | 100 | 66.67 | 90 |
ChildComponent.tsx | 66.67 | 100 | 0 | 66.67 | 4
SimpleFC.tsx | 100 | 100 | 100 | 100 |
--------------------|---------|----------|---------|---------|-------------------
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：9.654秒

IMHO测试不应关注实现细节。断言是否调用函数不会增加任何值。相反，您应该做的是测试在调用xyz函数时UI是如何变化的。执行添加到UI或从UI中删除的操作。您的测试应该更加关注用户将如何使用您的应用程序。用户不关心是否调用了callbackFunction。他所关心的是他在UI中看到了什么。回调实现了什么行为？ChildComponent将如何触发它？@Shyam是的，用户关心的是UI更改，但要更改UI，我们需要触发函数。我的问题是如何在不与子组件交互的情况下调用函数。我尝试了

invoke

类似的

wrapper.invoke（'getCustomerAddress'）（）

我遇到了一个错误“此表达式不可调用。Type'never'没有调用签名。ts（2349）类型为“string”的参数不可分配给类型为“never”的参数。“@sinthu225这是TS类型问题，您可以将类型转换为

任何

。从你的问题来看，我无法复制这个问题。你的问题中没有

getCustomerAddress

函数属性。我禁用了linting并将其转换为any。TypeError:ShallowRapper:：invoke（）需要一个prop的名称，该prop的值是一个函数

const wrapper=shallow（）；find（'button'）.invoke（'onClick'）（）。然后（（）=>{//expect（）}）如果我们有一个按钮或任何东西，这将工作