How to mock location inside storybook stories?

torrito
1 min readApr 15, 2020

If your component is expecting to be wrapped into Router you can mimic this by wrapping it into MemoryRouter inside your stories:

import React from 'react'
import { MemoryRouter, Route } from 'react-router'
export default {
title: 'UserCard',
decorators: []
}
const UserCard = ({
match: { params: { id } },
firstName,
lastName
}) => (
<div>{`${firstName} ${lastName} ${id}`}</div>
)
export const Default = () => {
const props = {
firstName: 'Al',
lastName: 'Pacino'
}
return (
<MemoryRouter initialEntries={['/user/108']}>
<Route
component={(routerProps) => <UserCard {...routerProps} {...props} />}
path='/user/:id'
/>
</MemoryRouter>
)
}

--

--