Svelte Jester i18n help

[kaydwithers]

Hi, I'm new to unit testing and I was wondering how to get svelte-jester working with i18n and the router.

When I run my test I get this error.

And the router error is..

[mihar-22]

Hey @kaydwithers!

I'm not sure what i18n and router you're referring to but ... if they are Svelte packages that contain a svelte key in their package.json, then you'll need to help Jest to resolve them.

This package is most likely what you're looking for -> https://www.npmjs.com/package/jest-svelte-resolver
Make sure to also have Babel all setup -> https://github.com/mihar-22/svelte-jester#babel

[kaydwithers]

Thanks Rahim, I updated my comment with the router error. I installed the resolver and my babel looks good. I added svelte-i18n to the ignore and that works now. But the router is still erroring.

  transformIgnorePatterns: [
    'node_modules/(?!(svelte-spa-router)/)',
    'node_modules/(?!(svelte-i18n)/)'
  ]

[mihar-22]

What's the error? Is it the same SyntaxError: Unexpected token '<'?

[kaydwithers]

Yep that's the error. Here are some more details..

[mihar-22]

That's weird. It seems like it's not transforming that file. Could you share your Jest configuration?

[kaydwithers]

This is jest.config.js

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.svg$': '<rootDir>/svgTransform.js',
    '^.+\\.svelte$': ['svelte-jester', {
      'preprocess': false
    }]
  },
  moduleFileExtensions: ['js', 'svelte'],
  testPathIgnorePatterns: ["node_modules"],
  transformIgnorePatterns: ["node_modules"]
};

[mihar-22]

The current configuration is ignoring transformations on any paths matching node_modules which includes svelte-spa-router. I think the following should work:

module.exports = {
  // ...
  transformIgnorePatterns: ['node_modules/(?!(svelte-spa-router|svelte-i18n)/)']
}

Basically it means don't bother transforming anything inside node_modules EXCEPT svelte-spa-router and svelte-i18n.

[kaydwithers]

Thanks for your help Rahim, the above helped. I also ended up having to import i18n and the below works.

import { render } from '@testing-library/svelte';
import { init, addMessages } from "svelte-i18n";
import en from "../src/i18n/en-EN.json";

import Home from '../src/svelte/routes/Home.svelte';

addMessages("en-EN", en);
init({
  fallbackLocale: "en-EN",
});

describe("Home", () => {
  it("should be rendered", async () => {
    const container = render(Home);
    expect(container).toBeTruthy();
  });
});

[kaydwithers]

Sorry to bother you again @mihar-22 , I'm having a bit of trouble with some other Svelte packages.

svelte-spa-router uses regexparam for parsing routes, here is the error.

Do you know what might be wrong?

[mihar-22]

I'm not sure but it might be because svelte-spa-router imports regexparam as an ESModule.

Try this:

module.exports = {
  // ...
  transformIgnorePatterns: ['node_modules/(?!(svelte-spa-router|svelte-i18n|regexparam)/)']
}

[kaydwithers]

Yeah I tried that but no luck. My jest config looks like this.

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.svg$': '<rootDir>/svgTransform.js',
    '^.+\\.svelte$': ['svelte-jester', {
      'preprocess': false
    }]
  },
  moduleFileExtensions: ['js', 'svelte'],
  resolver: "jest-svelte-resolver",
  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
  transformIgnorePatterns: ['node_modules/(?!(svelte-spa-router|svelte-paginate|regexparam)/)'],
  testURL: "http://localhost:5555"
};

[mihar-22]

Unfortunately I have no clue @kaydwithers. Could it be related to how you've implemented svelte-spa-router? Maybe it's a bug with jest-svelte-resolver? I'll dig into when I have some time.

[kaydwithers]

I did find this issue which is exactly the same as mine. I don't know how to resolve it though.

ItalyPaleAle/svelte-spa-router#81

[kaydwithers]

I ended up finding a solution with moduleNameMapper. The below works.

module.exports = {
  transform: {
    '^.+\\.svelte$': 'svelte-jester',
    '^.+\\.svg$': '<rootDir>/svgTransform.js',
    '^.+\\.(js|mjs)$': 'babel-jest'
  },
  moduleFileExtensions: [
    'js',
    'svelte',
    'mjs'
  ],
  moduleNameMapper: {
    // fix TypeError: regexparam is not a function
    '^regexparam$': '<rootDir>/node_modules/regexparam/dist/regexparam.mjs'
  },
  transformIgnorePatterns: [
    ignoreModules([
      'svelte-paginate',
      'svelte-spa-router',
      'regexparam'
    ])
  ],
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
}

function ignoreModules(modules) {
  return `node_modules/(?!(${modules.join('|')})/)`
}

[mihar-22]

That's awesome @kaydwithers . I still can't understand why it doesn't work without using moduleNameMapper. If it's transforming svelte-spa-router then it should pull in regexparam. I feel like I ran into this once but I forgot why.

[kaydwithers]

Hey @mihar-22, so sorry to disturb you again. Do you know of any examples on how to test with a router push? I'm using svelte-spa-router i.e.. something like..

import { push } from "svelte-spa-router";
import { render, screen } from '@testing-library/svelte';
import en from '../src/i18n/en-EN.json';
import App from '../src/App.svelte';

describe('App', () => {
  it('should render', async () => {
    const result = render(App);
    expect(result).toBeTruthy();
    expect(global.window.location.pathname).toEqual('/');
  });

  it('should call the correct URL', async () => {
    render(App);
    push('/about');
    expect(global.window.location.pathname).toEqual('/about');
  });

  it('should render heading', async () => {
    const heading = en.about.heading;
    expect(screen.getByText(heading)).toBeDefined();
  });
});

[mihar-22]

I don't have any examples to link you but I'd do it something like this:

import { render, screen, fireEvent } from '@testing-library/svelte'

it('should navigate me to about page', async () => {
  render(App);
  const aboutUsLink = screen.getByText(/about/i);
  await fireEvent.click(aboutUsLink);
  // This will wait for the text to appear on the page. Check the docs for more info.
  await screen.findByText('About Us Heading');
});

Try to stick to what the user would naturally see on the page, and the flow of events you'd expect going through the actual application. Don't unnaturally call functions or mock anything that doesn't need to be mocked. You'll get more effective + resilient tests in the end.

[kaydwithers]

Unfortunately we don't actually have buttons on the page. we have an app that progresses to other pages by scanning things i.e. a passport. So I need to mock a router push and test if the page has the text I'm looking for.