Question

提供以下功能：

./ http.js

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

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

./__ tests __ / someTest.js

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

我猜这是咖喱函数（或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;

然后在我的组件中，我通过react-refetch的道具获得settingsPutResponse。

我想测试在服务器用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>
  )
};

Answer 1

问自己关于模拟的第一个问题是“我真的需要模拟吗？”这里最直接的解决方案是直接测试“组件”，而不是尝试假冒其周围的http HOC包装器。

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

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

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

这里的示例代码没有意义，因为示例的每个部分都是伪代码。您要测试哪些真实代码？我看到过巨大的测试文件，它们实际上从未执行过任何真实的代码-它们只是测试精心设计的模拟系统。注意不要掉进那个陷阱。

开玩笑：模拟_HOC_或_curried_函数

1 个答案: