Unexpected token when using @testing-library/svelte

Hi,

I’m new to svelte, and I’m trying to add some unit tests to my application. I followed explanations on how to setup the testing library, but when I execute the “npm test” command on a component that imports for exemple : import { link } from 'svelte-routing';, there is this error :

 Jest encountered an unexpected token

 Details:

 ~pathToMyProject/node_modules/svelte-routing/src/index.js:1
 export { default as Router } from "./Router.svelte";
 ^^^^^^

 SyntaxError: Unexpected token export

Could someone help me on this one ?

Thanks.

[agrawal-rohit]

I was able to get past this error by adding a transformIgnorePatterns in my jest.config.js

jest.config.js

module.exports = {
    transform: {
      '^.+\\.svelte$': 'svelte-jester',
      '^.+\\.js$': 'babel-jest',
    },
    transformIgnorePatterns: [
        "node_modules/?!(svelte-routing)"
      ],
    moduleFileExtensions: ['js', 'svelte'],
  }

babel.config.js

module.exports = {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            node: 'current',
          },
        },
      ],
    ],
  }

However, this led to another error from Link.svelte as follows:

TypeError: Cannot destructure property 'base' of 'getContext(...)' as it is undefined.

I came across this thread while looking for a solution but haven’t been able to solve it.

[anthonytranDev]

Problem

Link.svelte

...
const { base } = getContext(ROUTER); // <-- this will assigned undefined
const location = getContext(LOCATION); // <-- same here too!
const dispatch = createEventDispatcher();
...

Router.svelte

...
  setContext(ROUTER, {
    activeRoute,
    base,
    routerBase,
    registerRoute,
    unregisterRoute
  });
</script>
...

In the Link.svelte component ROUTER given to getContext(ROUTER), will result in { base } be assigned to undefined, as setContext from the Router.svelte component has not been used pass down the context object ROUTER to getContext(ROUTER)

TypeError: Cannot destructure property 'base' of 'getContext(...)' as it is undefined.

Hence you’ll need to configure your tests to pass down a Router or MockRouter component, to wrap around Link, during your Jest, including @testing-library/svelte tests

Workaround

It’s not a nice workaround, as I’m currently using a package to convert my test files from *.js to *.jsx solely to enable me to easily test components that are nested (same as I would in React). 😢

1. Follow @agrawal-rohit config setup
2. Install the following npm install --save-dev svelte-jsx @babel/plugin-transform-react-jsx
3. Read instructions in svelte-jsx on how to test nested components - https://github.com/kenoxa/svelte-jsx#babel-configuration

You’d expect something like;

render(
  <Router>
    <Link to="/"></Link>
  </Router>,
)