Jest 模拟从实用程序文件导入答案

【问题标题】：Jest mock an import from a utility fileJest 模拟从实用程序文件导入
【发布时间】：2020-05-01 03:06:34
【问题描述】：

我正在尝试标准化定期模拟函数的模拟方式。

所以我有一个函数可以处理对useHomeScreenContext.ts 中的主屏幕上下文的调用。

export const useHomeScreenContext = () => useContext(/* context here */)

然后我正在测试的组件使用该钩子 Component.tsx

export const Component = () => {
    const context = useHomeScreenContext();
}

然后我的组件测试文件看起来像 Component.test.tsx

const contextSpy = jest.spyOn(context, 'useHomeScreenContext');
it("works", () => {
    contextSpy.mockReturnValue(fakeValue)
    expect(fakeValue).toBeTruthy()
})

我使用这种方法遇到的问题是，将需要通过模拟此上下文来测试大量文件，而实际的模拟比我在这里提出的要复杂一些。所以我想做的是使用实用函数来标准化模拟，所以我创建了一个名为mockHomeScreenContext.ts 的单独文件，看起来有点像这样。

const contextSpy = jest.spyOn(context, 'useHomeScreenContext');
export const mockHomeScreenContext = (context) => {
  beforeAll(() => {
    contextSpy.mockReturnValue(mergeDeepLeft(context, homeScreenContextDefaults));
  });

  afterAll(() => {
    contextSpy.mockRestore();
  });
};

它的想法是在描述块内部使用它，它会像这样在描述块的末尾整理自己

describe('and does not have funds', () => {
    mockHomeScreenContext(contextOverrides);
    it("works", () => {
        // Tests here
    })
});

这似乎工作得很好，直到我有 2 个描述块，然后事情开始变得有点混乱，一些测试似乎正确地模拟了数据，但是随后所有的测试都将失败，因为模拟函数没有返回任何东西.摆脱 afterAll 调用以清理模拟会有所帮助，但它会感染其他测试。

几天来，我一直在兜圈子，试图让它发挥作用，我觉得这真的不应该这么困难，我只是对 jest mocks 的工作原理有点了解。

【问题讨论】：

查看stackoverflow.com/a/64932507/861993

标签： reactjs typescript jestjs

【解决方案1】：

我认为问题在于您的 contextSpy 对于所有测试都是全局的，因为它是在 mockHomeScreenContext 函数之外创建的。正如您在documentation 中找到的那样，mockRestore 将是restore the original (non-mocked) implementation。您可以尝试使用mockClear，因为它是一个更软的版本（我通常只是使用它）。

但是，我建议不要像这样模拟您的上下文，而是创建一个模拟提供程序，使context 正常工作，而无需进行广泛的模拟（您可能会看到这很痛苦） .

这是我想到的示例：

在测试中的使用：

<MockProvider context={contextOverrides}>
  <YourComponent/>
</MockProvider>

及实施：

const MockProvider = ({context, children}) => {
  return (
    <YourContext.Provider value={mergeDeepLeft(context, homeScreenContextDefaults)}>
      {children}
    </YourContext.Provider>
  )
}

这样您就可以摆脱所有那些硬模拟并使用真实的上下文（具有一些模拟值）。

【讨论】：