I'll be forward with this, I have absolutely no idea which project I should be posting this in, but I feel like I probably should start somewhere, so I'll go here.
I'm trying to get a svelte project setup. It is currently very minimal, and uses YRV (svelte app router).
I have jest, babel-jest, svelte-jester, @babel/core and @babel/preset-env all installed.
jest.config.js
module.exports = {
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.svelte$": "svelte-jester"
},
moduleFileExtensions: [
'js',
'svelte'
]
};babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
}When I started trying to test I was running into an error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• 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/en/configuration.html
Details:
C:\Users\Jim\projects\bill-tracker\front-end\node_modules\.pnpm\[email protected][email protected]\node_modules\yrv\build\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Router from './lib/Router.svelte';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | <script>
2 | import Button from '../components/button.svelte';
> 3 | import { Link } from 'yrv';
| ^
4 | </script>
5 | <form class="login">
6 | I am the login form
at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/routes/login.svelte:3:16)
Which is obviously rather odd, because I have the transform set in my jest config.
what I've found in testing is that removing imports form a svelte library (like yrv) works just fine, I can run and mount the component in a test, like so:
// very rough example test, but it passes
import { render } from '@testing-library/svelte';
import Navbar from './navbar.svelte';
it('testing', async () => {
const wrapper = render(Navbar);
expect(wrapper.getByText('Navigation Navigation')).toBeTruthy();
});navbar.svelte
<nav class="bg-green-600 text-gray-100 p-3">
Navigation Navigation
</nav>
To further test this I installed a svelte component I didn't need, svelte-calendar, and modifying my navbar component to pull that component in the test then breaks with the same error (but obviously now pointing to the navbar.svelte component instead of the app.svelte).
Any help would be appreciated; I don't know for sure it's an error with svelte jester, or something with jest, but obviously this is sort of an issue when i can't unit test my components.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent