Skip to content
This repository has been archived by the owner on Nov 15, 2022. It is now read-only.

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

Open
dschinkel opened this issue Oct 11, 2020 · 3 comments
Open

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

dschinkel opened this issue Oct 11, 2020 · 3 comments

Comments

@dschinkel
Copy link

dschinkel commented Oct 11, 2020

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 dschinkel changed the title Test Errors with location is not defined when importing A "location is not defined" Error after importing A Oct 11, 2020
@dschinkel
Copy link
Author

Can anyone help me with this error?

@dschinkel
Copy link
Author

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

@icyJoseph
Copy link

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
  }

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants