Jest.js 在react-router-dom v6中模拟usePrompt

t40tm48m 于 12个月前发布在 Jest

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

Prompt.js

import { unstable_usePrompt as usePrompt } from 'react-router-dom';

// eslint-disable-next-line react/prop-types
export default function Prompt({ when, message }) {
  usePrompt({ when, message });
  return null;
}

字符串

Prompt.test.js

import {
  createMemoryRouter,
  RouterProvider,
} from 'react-router-dom';
import renderer from 'react-test-renderer';

import Prompt from '../Prompt';

const mockedUsePrompt = jest.fn();

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  unstable_usePrompt: () => mockedUsePrompt,
}));

describe('Prompt', () => {
  it('should call usePrompt with parameter', () => {
    const router = createMemoryRouter(
      [
        {
          path: '/',
          element: <Prompt when message="Are you sure?" />,
        },
      ],
      { initialEntries: ['/'] },
    );
    const component = renderer.create(
      <RouterProvider router={router} />,
    );
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    expect(mockedUsePrompt).toHaveBeenCalledWith({ when: true, message: 'Are you sure?' });
  });
});

型
如何检查使用参数调用usePrompt？
这行 expect（mockedNotice Prompt）.toHaveBeenCalledWith（{ when：true，message：'Are you sure？' }）; 不起作用

jestjs

来源：https://stackoverflow.com/questions/77534741/mock-useprompt-in-react-router-dom-v6

1条答案

按热度按时间

q5lcpyga1#

你没有正确地模拟unstable_usePrompt。参见下面的工作示例：
Prompt.js：

import { unstable_usePrompt as usePrompt } from 'react-router-dom';

console.log("🚀 ~ file: Prompt.js:2 ~ usePrompt:", usePrompt)

export default function Prompt({ when, message }) {
  usePrompt({ when, message });
  return null;
}

字符串
Prompt.test.js：

import { createMemoryRouter, RouterProvider, unstable_usePrompt } from 'react-router-dom';
import renderer from 'react-test-renderer';
import Prompt from './Prompt';

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  unstable_usePrompt: jest.fn(),
}));

describe('Prompt', () => {
  it('should call usePrompt with parameter', () => {
    const router = createMemoryRouter(
      [
        {
          path: '/',
          element: <Prompt when message="Are you sure?" />,
        },
      ],
      { initialEntries: ['/'] },
    );
    renderer.create(<RouterProvider router={router} />);
    expect(unstable_usePrompt).toHaveBeenCalledWith({ when: true, message: 'Are you sure?' });
  });
});

型
测试结果：

console.log
    🚀 ~ file: Prompt.js:2 ~ usePrompt: [Function: mockConstructor] {
      _isMockFunction: true,
      getMockImplementation: [Function (anonymous)],
      mock: [Getter/Setter],
      mockClear: [Function (anonymous)],
      mockReset: [Function (anonymous)],
      mockRestore: [Function (anonymous)],
      mockReturnValueOnce: [Function (anonymous)],
      mockResolvedValueOnce: [Function (anonymous)],
      mockRejectedValueOnce: [Function (anonymous)],
      mockReturnValue: [Function (anonymous)],
      mockResolvedValue: [Function (anonymous)],
      mockRejectedValue: [Function (anonymous)],
      mockImplementationOnce: [Function (anonymous)],
      mockImplementation: [Function (anonymous)],
      mockReturnThis: [Function (anonymous)],
      mockName: [Function (anonymous)],
      getMockName: [Function (anonymous)]
    }

      at Object.<anonymous> (src/Prompt/Prompt.js:2:9)

 PASS  src/Prompt/Prompt.test.js
  Prompt
    ✓ should call usePrompt with parameter (9 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.176 s, estimated 1 s
Ran all test suites matching /\/home\/lindu\/workspace\/mrdulin\/test_prompt_component\/src\/Prompt\/Prompt.test.js/i.

Watch Usage: Press w to show more.

型

赞(0）回复(0）举报 12个月前

我来回答

Jest.js 在react-router-dom v6中模拟usePrompt

1条答案

相关问题

热门标签

最新问答