Paratron / hookrouter

The flexible, and fast router for react that is entirely based on hooks
1.5k stars 90 forks source link

"location is not defined" Error after importing A #140

Open dschinkel opened 4 years ago

dschinkel commented 4 years ago

I don't understand why this would even bomb out, I'm simply trying to import the A (link) component to my test.
I'm not even exercising this yet in code, why does it ask for location? If It needs it for tests, how do I provide that?

import { A } from 'hookrouter';

it('image links to their profile page', () => {
  ...
  const image = isolateComponent(<GravatarImage user={user} />)
  ...

  expect(profileLink.props.href).to.equal(routeToProfile);
});

Error:

node_modules/hookrouter/src/queryParams.js:55
    queryParamObject = queryStringToObject(location.search.substr(1));
                                        ^
ReferenceError: location is not defined
    at Object.<anonymous> (/node_modules/hookrouter/src/queryParams.js:55:41)

It's not even my test, I get this same exact problem when I import this into production code, what gives? The docs don't even talk about location.

Here's what I'm trying to do in the corresponding child component:

import { A } from 'hookrouter';

...

return (
  <div>
    <A href={`/company/${company.id}`} >
      <img alt="company profile image" />
    </A>
  </div>
);

So when I click it, it should navigate to that route and render the Company Profile page.

Here's my App.tsx:

export const routes = {
  '/company/:id': ({ id }) => <CompanyProfile companyId={id} />
};

const RenderRoute = () => {
  const routeResult = useRoutes(routes);

  return (
    <>{routeResult}</>
  );
};

const App = () => <RenderRoute />

export default App;

All your examples show the Root App component but no examples show child components. I don't see a need to have routeResult in a child component when if they click a link, it should do a redirect completely out of the current rendered component they are currently in. So how do we get this error resolved and this redirect working here?

dschinkel commented 4 years ago

Can anyone help me with this error?

dschinkel commented 4 years ago

Is this repo dead? Seems like all new issues have gotten no response.

icyJoseph commented 4 years ago

I think you have to mock the location object with something like:

global.window = Object.create(window);
const url = "http://dummy.com";
Object.defineProperty(window, 'location', {
  value: {
    href: url
  }