[React] withRouter を使っている component を Storybook でマウントする

対象となる問題

withRouter で wrap している React component を Storybook でマウントした場合，
props.match.params が空オブジェクト {} になる．

このままだと，例えば /users/:id という URL で component をマウントしている場合，

// User.js
class User extends Component {
  constructor(props) {
    this.userId = props.match.params.id;
  }
  render() {
    return (
      ...
    );
  }
}

export default withRouter(User);

// Storybook
import User from './User';

stories.add('User component', () => (
  <MemoryRouter initialEntries={['/users/1']}>
    <User />
  </MemoryRouter>
));

というようなことをした時に props.match.params.id が 正しく取得できず，意図した動作にならない．

解決方法

withRouter で wrap する前の component を export して Storybook でマウントし，必要な props はその時に指定する．
history もその際に定義する．

// User.js
class User extends Component {
  constructor(props) {
    this.userId = props.match.params.id;
  }
  render() {
    return (
      ...
    );
  }
}

export { User };

export default withRouter(User);

// Storybook
import { User } from './User';

stories.add('User component', () => (
  <MemoryRouter initialEntries={['/users/1']}>
    <User match={{params: {id: 1}}} history={{push: () => {}} />
  </MemoryRouter>
));

もっといい解決方法があるような気がするので，ご存知の方がいらっしゃればご教示いただけるとありがたいです．