Reactjs 监视组件方法中的函数

比如我有

import React from 'react';
import { getProducts } from 'api/getProducts';

export class Example extends React.Component {
    state = {
        items: []
    };

    componentDidMount() {
        this.fetchProducts();
    }

    fetchProducts = async () => {
        const { products: items } = this.state;
        if (items.length > 0) {
            return;  //TEST COVERAGE HERE MISSING
        }
        try {
            const { result } = await getProducts('/api/product/1');
            this.setState({ items: result });
        } catch (e) {
            // no-op
        }
    };

    render() {
        const { items } = this.state;
        return <div>{items}</div>;
    }
}

您可以使用方法模拟

api/getProducts

模块

例如

index.tsx

：

从“React”导入React；
从“./api/getProducts”导入{getProducts}；
导出类示例扩展了React.Component{
状态：任何={
项目：[]，
};
componentDidMount（）{
这是fetchProducts（）；
}
fetchProducts=async（）=>{
//@ts忽略
const{items}=this.state；
如果（items.length>0）{
返回；
}
试一试{
const{result}=await-getProducts（'/api/product/1'）；
this.setState（{items:result}）；
}捕获（e）{
//无操作
}
};
render（）{
const{items}=this.state；
返回(

{items.map（（item）=>(
{item.name}
))}

);
}
}

api/getProducts.ts

：

导出异步函数getProducts（url）{ 返回{result:[]}； }

index.spec.tsx

：

从“React”导入React；
从“/”导入{Example}；
从“酶”导入{mount}；
从“./api/getProducts”导入{getProducts}；
jest.mock（'./api/getProducts.ts'，（）=>{
返回{
getProducts:jest.fn（），
};
});
描述（'示例'，（）=>{
之后（（）=>{
jest.resetAllMocks（）；
});
它（'应该正确获取产品'，异步（）=>{
const wrapper=mount（）；
const instance=wrapper.instance（）；
包装器设置状态({
项目：[{id:1，名称：'kettle'}]，
});
等待实例['fetchProducts']（）；
expect（getProducts）.toBeCalledWith（'/api/product/1'）；
});
});

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

PASS src/stackoverflow/59241777/index.spec.tsx
例子
✓ 应正确获取产品（56ms）
-----------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
-----------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 100 | 100 | 100 ||
index.tsx | 100 | 100 | 100 | 100 ||
-----------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：5.273s，估计10s

@MichaelBlack如果我的回答对你有帮助，请接受。非常感谢。嗨@slideshowp2，我删除了答案，因为我意识到我的主要问题没有得到回答。即使您的答案得到了100%的覆盖率，为什么您希望使用“/api/product/1”调用getProducts？如果项目已经存在，则在校准getProducts之前，fetchProducts应该已经返回。难道不应该期望它不打电话吗？感谢您的帮助，我们为

getProducts

方法创建了一个存根，还需要确保使用正确的参数调用它，这意味着我们应该确保代码执行路径符合预期。这就是为什么我们应该期望使用

'/api/product/1'

调用

getProducts

import React from 'react';
import { getProducts } from 'api/getProducts';
import { Example } from './Example';

jest.mock('api/getProducts');

describe('Example', () => {
    it('do not call getProducts if it already exists in state', async () => {
        const wrapper = mount(<Example />);
        const instance = wrapper.instance();
        instance.setState({
            items: [{ id: 1, name: 'kettle' }]
        });

        await instance.fetchProducts();

        //How to spy on getProducts and assert it hasn't been called?

    });
});