roxiness / routify

Automated Svelte routes
https://routify.dev
1.87k stars 88 forks source link

Testing with svelte-testing-library & jest: "TypeError: ctx[0] is not a function" #202

Closed LkeMitchll closed 3 years ago

LkeMitchll commented 4 years ago

I think this is a bug, but I can't be sure. I'm using svelte-testing-library & jest to test my work-in-progress website. Unfortunately my test fails when I try to test a component that uses $isActive('/index') or $url:

bug description Using the $isActive() or $url helpers in a component while using svelte-testing-library to test results in the following error:

TypeError: ctx[0] is not a function

component snippet:

<script>
  import { url, isActive } from "@sveltech/routify";
  import Logo from "./Logo.svelte";
  const links = [["/list", "List"], ["/work", "Work"], ["/toolkit", "Toolkit"]];
</script>

<ul>
  {#each links as [path, name]}
    <li>
      <a
        href={$url(path)}
        class:active={$isActive(path)}
        role="link"
        aria-current={$isActive(path) ? 'page' : undefined}>
        {name}
      </a>
    </li>
  {/each}
</ul>

test:

import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/svelte";
import SiteNav from "./SiteNav.svelte";

test("shows a list of links to click", () => {
  const { container } = render(SiteNav);
  const link = screen.getByRole("link", { name: /list/i });
  expect(link).toBeInTheDocument();
});

There is a branch containing the full site here: GitHub

package.json GitHub

version

"@sveltech/routify": "^1.7.11", 
"svelte": "^3.21.0"

screenshot

Screenshot 2020-06-02 at 08 46 55
jakobrosenberg commented 4 years ago

@LkeMitchll would you be interested in creating a repo based on npx @sveltech/routify init --no-example and a basic test. It would help me get to this sooner.

LkeMitchll commented 4 years ago

@LkeMitchll would you be interested in creating a repo based on npx @sveltech/routify init --no-example and a basic test. It would help me get to this sooner.

@jakobrosenberg Here you go! GitHub

jakobrosenberg commented 4 years ago

Been at this today, but I can't seem to get symlinks working in Jest. If I run npm link @sveltech/routify, Jest doesn't use the linked Routify module. In fact, I have no idea where Jest is getting Routify from.

ghostdevv commented 3 years ago

Is this still an issue? @LkeMitchll

LkeMitchll commented 3 years ago

Is this still an issue? @LkeMitchll

Apologies, but I switched stacks away from routify, so I don't know. I will close this for now, if a new person has the same issue they can probably find this old issue.