testing-library
issue with typescript + svelte3 + nested components
hi,
I've been using svelte-testing-library to successfully test a number of svelte 3 components written in typescript. Yesterday I've introduced the svelte-spa-router package to add client side routing to the app and testing is now failing for the component which embeds the router.
here is the link to my repo branch (a mono repo with both client and server code). the client code is here. the failing component is here and it is the entry App.svelte component:
<script lang='ts'>
import { Navbar, NavbarBrand, Nav, NavLink } from "sveltestrap"
import Router from 'svelte-spa-router'
import {wrap} from 'svelte-spa-router/wrap'
const routes = {
'/': wrap({ asyncComponent: () => import("pages/Home.svelte") }),
'/search': wrap({ asyncComponent: () => import("pages/MainPage.svelte") }),
// Catch-all
'*': wrap({ asyncComponent: () => import("pages/NotFound.svelte") }),
}
</script>
<div class="container-fluid gx-5">
<Navbar color="light" light expand="md">
<NavbarBrand href="/">Welcome to the DSDR!</NavbarBrand>
<Nav>
<NavLink href="#/">Home</NavLink>
<NavLink href="#/search">Search</NavLink>
<NavLink disabled href="#/reindex">Reindex DB</NavLink>
<NavLink disabled href="#/logout">Logout</NavLink>
</Nav>
</Navbar>
<Router {routes}/>
</div>
the test is located near the component here:
/**
* @jest-environment jsdom
*/
import '@testing-library/jest-dom'
import { render, fireEvent } from '@testing-library/svelte'
import App from './App.svelte'
test('home-page-render-test', async () => {
const { getByText } = render(App)
expect(getByText('Welcome aboard')).toBeVisible()
expect(getByText('Welcome to the DSDR!')).toBeVisible()
})
when I run the tests this is the error I got:
FAIL src/App.test.ts
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/home/matteo/Documents/DSDR/app/node_modules/svelte-spa-router/Router.svelte:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<script context="module">
^
SyntaxError: Unexpected token '<'
4 | import {wrap} from 'svelte-spa-router/wrap'
5 |
> 6 | const routes = {
| ^
7 | '/': wrap({ asyncComponent: () => import("pages/Home.svelte") }),
8 | '/search': wrap({ asyncComponent: () => import("pages/MainPage.svelte") }),
9 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/App.svelte:6:29)
the error is rather obscure for me (I'm quite new to jest and testing library) and also any other component has got no traspiling issues.
Any hint to solve this? Thank you!
ok this is not a dynamic import or router related issue, just nesting a svelte component into another causes the issue...
<script lang='ts'>
import { Navbar, NavbarBrand, Nav, NavLink } from "sveltestrap"
import Router from 'svelte-spa-router'
/*test sync routing for testing library*/
import Home from "pages/Home.svelte"
import MainPage from "pages/MainPage.svelte"
import NotFound from "pages/NotFound.svelte"
const routes = {
'/': Home,
'/search': MainPage,
// Catch-all
'*': NotFound,
}
</script>
<div class="container-fluid gx-5">
<Navbar color="light" light expand="md">
<NavbarBrand href="/">Welcome to the DSDR!</NavbarBrand>
<Nav>
<NavLink href="#/">Home</NavLink>
<NavLink href="#/search">Search</NavLink>
<NavLink disabled href="#/reindex">Reindex DB</NavLink>
<NavLink disabled href="#/logout">Logout</NavLink>
</Nav>
</Navbar>
<Router {routes}/>
</div>
leads to:
FAIL src/App.test.ts
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/home/matteo/Documents/DSDR/app/node_modules/svelte-spa-router/Router.svelte:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<script context="module">
^
SyntaxError: Unexpected token '<'
4 |
5 | /*test sync routing for testing library*/
> 6 | import Home from "pages/Home.svelte"
| ^
7 | import MainPage from "pages/MainPage.svelte"
8 | import NotFound from "pages/NotFound.svelte"
9 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/App.svelte:6:29)
let me rename the ticket as this has anything to do neither with the router nor with its dynamic import syntax. incidentally none of my other components has nested svelte components imported from *.svelte files.
@absinthetized is this issue still relevant for you? Most likely it looks like some sort of Jest configuration issue, but I'm not sure there's anything actionable at this point given updates in the ecosystem since the time of writing
Thanks for checking. Feel free to close: the related project is now in the attic!