17、React Router与Redux的测试驱动开发实践

React Router与Redux的测试驱动开发实践

1. React Router测试驱动开发

在使用浅渲染时，React Router不会在点击按钮时自动更新显示的路由。测试中需要手动进行导航，这是浅渲染带来的复杂性，但这类测试相对较少。

1.1 使用history.push更改位置

Link组件可实现URL更改，但需用户点击。若要以编程方式更改URL，可使用React Router提供的history prop的push函数，并通过标准间谍函数进行测试。示例代码如下：

describe('App', () => {
  let historySpy;
  beforeEach(() => {
    historySpy = jest.fn();
  });
  it('navigates to / when AppointmentFormLoader is saved', () => {
    render(<App history={
  
  { push: historySpy }} />);
    const onSave = routeFor('/addAppointment').props.render().props.onSave;
    onSave();
    expect(historySpy).toHaveBeenCalledWith('/');
  });
});

const transitionToDayView = useCallback(
  () => history.push('/'),