Jest.js 如何在useContext钩子上进行mock/spy？

x33g5p2x 于 2023-08-01 发布在 Jest

关注(0)|答案(1)|浏览(156)

我试图对两个导出的帮助函数进行单元测试，这两个函数都在我的默认上下文值上调用useContext。然而，我似乎不能得到它的工作后，大量的网上寻找。

export const func1 = () => {
    const { key1, key2 } = useContext(MyContext);
    return { key1, key2 };
}

export const func2 = () => {
    const { key2 } = useContext(MyContext);

    // some more complex stuff here
}

字符串
测试项目

import React, { useContext } from 'react';

...

it('with mock', () => {
    jest.mock('react', () => ({
      ...jest.requireActual('react'),
      useContext: (ctx: any) => mockUseContext(ctx)
    }));

    useContext.mockImplementation(ctx => ({ someKey: 'someVal' }));

    // Property 'mockImplementation' does not exist on type ' (context: Context ) => T

    expect(func1()).toBe({ someKey: 'someVal' });
});

it('with spyOn', () => {
     jest.spyOn(React, 'useContext').mockImplementation(() => ({ someKey: 'someVal' }));

     expect(func1()).toBe({ someKey: 'someVal' });
});

型

jestjs

来源：https://stackoverflow.com/questions/76604956/how-can-i-mock-spy-on-a-usecontext-hook

1条答案

按热度按时间

z3yyvxxp1#

当单元测试使用useContext挂接的帮助器函数时，您需要模拟useContext函数以提供您自己的模拟值。以下是您的操作方法：

import React, { useContext } from 'react';

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useContext: jest.fn(),
}));

const mockContextValue = {
  key1: 'value1',
  key2: 'value2',
};

describe('Helper Functions', () => {
  beforeEach(() => {
    useContext.mockReturnValue(mockContextValue);
  });

  it('should return the correct values from func1', () => {
    const { func1 } = require('./yourHelperFunctionsFile');
    const result = func1();
    expect(result).toEqual(mockContextValue);
  });

  it('should work with func2', () => {
    const { func2 } = require('./yourHelperFunctionsFile');
    // Test func2 here
  });
});

字符串
在本例中，我们使用jest.mock模拟React中的useContext函数。“然后，我们将useContext mock的返回值设置为mockContextValue，这是一个表示要在测试中使用的值的对象。
在每个测试中，我们导入被测试的特定函数并调用它。在func1的情况下，我们期望结果等于mockContextValue。
请注意，为了使模拟正确工作，您需要确保在每个测试用例中导入函数，如示例所示。这可确保在呼叫函式时使用useContext的仿真版本。
您可以根据自己的需要随意修改代码，并为func2或任何其他要测试的helper函数添加额外的Assert和测试用例。

赞(0）回复(0）举报 2023-08-01

我来回答

Jest.js 如何在useContext钩子上进行mock/spy？

1条答案

相关问题

热门标签

最新问答