代码之家 › 专栏 › 技术社区 › Liz Parody

如何使用jest模拟react router dom的BrowserRouter

jestjs testing reactjs javascript

Liz Parody · 技术社区 · 7 年前

我有一个呈现应用程序路由的组件: https://jsbin.com/bahaxudijo/edit?js

import React from 'react';
import renderer from 'react-test-renderer';

import Router from '../../../components/Router/Component';

jest.mock('react-router-dom', () => ({
  BrowserRouter: ({ children }) => <div>{children}</div>,
  Route: ({ children }) => <div>{children}</div>,
}));

jest.mock('../../../components/Nav/index', () => '<MockedNav />');
jest.mock('../../../components/ScheduleManager/index', () => '<MockedScheduleManager />');

const props = {
  token: '',
  loginStaff: jest.fn(),
};

describe('<Router />', () => {
  describe('When is passed a token', () => {
    it('renders the correct route', () => {
      const component = renderer.create(<Router {...props} />);
      expect(component).toMatchSnapshot();
    });
  });
});

但是我错误地模拟了BrowserRouter和路由,所以测试通过了,但是快照只是空div。我怎样才能正确地模拟浏览器路由器和路由?

1 回复 | 直到 7 年前

curtybear 5 年前

jest.mock('react-router-dom', () => {
  // Require the original module to not be mocked...
  const originalModule = jest.requireActual('react-router-dom');

  return {
    __esModule: true,
    ...originalModule,
    // add your noops here
    useParams: jest.fn(),
    useHistory: jest.fn(),
  };
});

Jeff 6 年前

const reactRouter = require('react-router-dom');
const { MemoryRouter } = reactRouter;
const MockBrowserRouter = ({ children }) => (
  <MemoryRouter initialEntries={['/']}>
    { children }
  </MemoryRouter>
);
MockBrowserRouter.propTypes = { children: PropTypes.node.isRequired };
reactRouter.BrowserRouter = MockBrowserRouter;

Lucio 5 年前

另一种方式:

const rrd = require('react-router-dom');

jest.spyOn(rrd, 'BrowserRouter').mockImplementation(({children}) => children);

资料来源:

推荐文章

Tim Kirkwood · 比较空数据帧

7 月前

Display name · 在qunit中,如何查询滚动条高度或检测元素上是否存在滚动条?

1 年前

nerrood · 为什么在笑话测试中不调用save

1 年前

eof · Chrome块文件下载-selenium

1 年前

Display name · Ember.js辛烷值验收试验

1 年前

Vitto · 理智和回归测试是如何在一个简单的场景中协同工作的?

1 年前

mattsmith5 · 使用特征文件并行计算空手道跑场景

1 年前

Powet · 如何解析具有@TestPropertySource值的属性占位符?

1 年前

Norronas · 采用裸机编程的寄存器单元测试

1 年前

mike rodent · 如何测试我的`__main__`文件的功能?

1 年前