Javascript 笑话：模拟一个_HOC uuu或_curried uu）函数

鉴于以下功能：

/http.js

const http = {
  refetch() {
    return (component) => component;
  }
}

import { refetch } from './http';

jest.mock('./http', () => {
  return {
    refetch: jest.fn();
  }
}

refetch.mockImplementation((component) => {
  // doing some stuff
})

我想在测试中模拟该函数，如下所示：

/\uuuuu测试/someTest.js

const http = {
  refetch() {
    return (component) => component;
  }
}

import { refetch } from './http';

jest.mock('./http', () => {
  return {
    refetch: jest.fn();
  }
}

refetch.mockImplementation((component) => {
  // doing some stuff
})

但我收到了错误

TypeError: _http.refetch.mockImplementation is not a function

如何模拟给定示例中的refetch函数

---

更新：

当我将模拟函数稍微修改为：

jest.mock(
  '../http',
  () => ({ refetch: jest.fn() }),
);

我得到一个不同的错误：

TypeError: (0 , _http.refetch)(...) is not a function

我猜这是因为curried函数（或HOC函数）的语法没有正确映射。但我不知道怎么解决它

---

我正在测试的一些真正的代码

注意：这个例子有点草率。它在应用程序中工作。给出的示例旨在给出工作原理的概念

/SettingsContainer

// ...some code

  return (
    <FormComponent
      settingsFetch={settingsFetch}
      settingsPutResponse={settingsPutResponse}
    />
  );
}

const ConnectedSettingsContainer = refetch(
  ({
    match: { params: { someId } },
  }) => ({
    settingsFetch: {
      url: 'https://some-url.com/api/v1/f',
    },
    settingsPut: (data) => ({
      settingsPutResponse: {
        url: 'https://some-url.com/api/v1/p',
      }
    }),
  }),
)(SettingsContainer);

export default ConnectedSettingsContainer;

/…一些代码
返回(
);
}
const CONNECTED SETTINGS CONTAINER=refetch(
({
匹配：{params:{someId}}，
}) => ({
设置蚀刻：{
网址：'https://some-url.com/api/v1/f',
},
settingsPut：（数据）=>({
设置响应：{
网址：'https://some-url.com/api/v1/p',
}
}),
}),
)（设置容器）；
导出默认连接设置容器；

然后在我的组件中，我通过道具获得设置SPUTResponse，而道具确实如此

我想测试用户是否可以在服务器响应一次或两次500之后重新提交表单，直到返回204为止

/FormComponent

// ...code
const FormComp = ({ settingsResponse }) => {
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if (settingsResponse && settingsResponse.fulfilled) {
      setSuccess(true);
    }
  }, [settingsResponse]);

  if (success) {
    // state of the form wil be reset
  }

  return (
    <form>
      <label htmlFor"username">
      <input type="text" id="username" />
      <button type="submit">Save</button>
    </form>
  )
};

/…代码
常量FormComp=（{settingsResponse}）=>{
const[success，setSuccess]=使用状态（false）；
useffect（（）=>{
如果（设置响应和设置响应已完成）{
设置成功（true）；
}
}，[设置响应]；
如果（成功）{
//表单的状态将被重置
}
返回(
拯救
)
};

关于模拟，你要问自己的第一个问题是“我真的需要模拟吗？”这里最简单的解决方案是直接测试“组件”，而不是试图在其周围伪造http HOC包装

我通常避免尝试与I/O相关的单元测试。这些事情最好通过功能测试或集成测试来处理。您可以通过确保给定相同的道具，组件始终呈现相同的输出来实现这一点。然后，不需要模拟就可以对组件进行单元测试

然后使用功能测试和/或集成测试来确保实际的http I/O正确发生

不过，为了更直接地回答您的问题，jest.fn不是一个组件，但React需要一个组件。如果你想让模拟工作，你必须给它一个真正的组件

---

这里的示例代码没有意义，因为示例的每个部分都是伪代码。你想测试哪一个真正的代码？我看到过巨大的测试文件，它们从来没有实际执行过任何真正的代码——它们只是在测试一个复杂的模拟系统。小心别掉进那个陷阱。

我在模仿API的响应。此get通过使用react refetch HOC的道具传递到我的组件。我想根据API的不同结果（204500等）测试组件。添加了一些示例代码以给出总体思路。希望这更有意义。