hookrouter icon indicating copy to clipboard operation
hookrouter copied to clipboard

"location is not defined" Error after importing A

Open dschinkel opened this issue 4 years ago • 3 comments

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 avatar Oct 11 '20 22:10 dschinkel

Can anyone help me with this error?

dschinkel avatar Oct 16 '20 20:10 dschinkel

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

dschinkel avatar Oct 18 '20 20:10 dschinkel

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
  }

icyJoseph avatar Oct 20 '20 08:10 icyJoseph