TypeError [ERR_INVALID_ARG_TYPE]

[JeffWScott]

Trying to test svelte components on Ubuntu 18 Desktop.

Error is TypeError [ERR_INVALID_ARG_TYPE]: the "path" argument must be of the type string.  
Received type boolean

I'm re-running your TestComponent.svelte test.

I tried the solution from issue #5 buy running from './node_modules/.bin/luna with no luck.

Any help?

Also (as an aside) is it possible with luna to navigate the interface. For instance like "click" a button and validate the a resulting node now exists?

[ccampbell]

Hmm. Do you have the exact test command you are running? If you look in the package.json you can see:

bin/luna.js test/svelte --svelte=test/svelte/components/*.svelte

I just ran it from this repo:

$ bin/luna.js test/svelte --svelte=test/svelte/components/*.svelte
🌙  Running tests…
⏳  [==================================================] 100% (1/1)
💯  All tests passed!

=============================== Coverage summary ===============================
Statements   : 43.36% ( 124/286 )
Branches     : 100% ( 17/17 )
Functions    : 100% ( 0/0 )
Lines        : 43.36% ( 124/286 )
================================================================================

💾  HTML coverage report available at coverage/lcov-report/index.html
⚡️  Took 1 second

If you are just testing using this repo itself you will have to first run npm run build and then npm run test-browser would be a shortcut to run the svelte test too. If you npm install luna-testing in another repo then npx luna should work.

And yes, it is possible to navigate the interface since the tests just run in the browser itself. So you can do something like:

document.querySelector('.button-class').click();

[JeffWScott]

./node_modules/.bin/luna test/test-something.js -s

changing it to this works

npm luna test/test-something.js --svelte=test/*.svelte

Unfortunately when I change the import in the test to be the path to my App.svelte I get a Syntax error in the onMount() function.

The App builds and runs fine in Chrome so I'm not sure what that could be, You probably don't either :)

Are you enforcing any EsLint stuff?

[ccampbell]

Hmm. If you run luna with the --debug flag it should print a URL that you can then visit in the browser directly which may give you a better idea of what the error is. It is possible that one of the buble transformations is causing this. I have been debating dropping buble completely from the rollup build process since it has caused other errors like #14.

I am not enforcing anything, but the buble compiler might be.

It would be interesting to see if commenting out this block fixes it:

https://github.com/ccampbell/luna-testing/blob/d7bd2031ad13adf723c2e51d637a0b57fb26b762/src/server.js#L29-L34

[JeffWScott]

If I don't use -s and instead use --svelte="path to svelte file" I get an error that an import cannot be found (It's there).

This is the svelte file I'm trying to Mount https://github.com/Lamden/wallet/blob/master/src/svelte/App.svelte

It fails on line 20 with the error

Error: Could not resolve '../svelte/firstRun/FirstRunMain.svelte' from ../js/router.js'

Maybe my app is too complicated to be mounted?

[ccampbell]

Hmm. It may be the glob used to match .svelte files. You have to pass a glob that will match all svelte files in your application. It passes that argument directly into the include configuration for https://github.com/sveltejs/rollup-plugin-svelte.

If you are not able to get it to work could you make a branch of that repo with luna tests failing so I can take a look?

[JeffWScott]

@ccampbell I appreciate it. I have yet to find a solution for testing this application.

https://github.com/Lamden/wallet/tree/testing-luna

[ccampbell]

Okay so it is failing for me on:

⚠️  SyntaxError: Unexpected token (1:1)
1 : <?xml version="1.0" encoding="UTF-8" standalone="no"?>

I noticed that you have a bunch of imports in regular js files like

import twitter from '../img/menu_icons/icon_twitter.svg';

Importing html/svgs is not valid javascript so that is why luna is failing. I see you have a webpack plugin to handle those (file-loader?). Unfortunately that is not going to work in luna. I am checking to see if there is a rollup plugin that can do it, but I am not sure.

If those files are only rendered from svelte components you could import them directly into the components, but that would mean you couldn’t consolidate them all into a single images.js file.

For example if you changed your App.svelte to

import heart from '../img/menu_icons/icon_heart.svelte'

And renamed icon_heart.svg to icon_heart.svelte then it successfully resolves, but there are other dependencies scattered throughout so you would have to change all of them.

I am not sure what to recommend. I do not believe this is a bug in luna, but it is unfortunate.

[ccampbell]

And just for reference, the command I am running is:

$ npx luna test --svelte=src/**/*.svelte
🌙  Running tests…

test/test-something.js

⚠️  SyntaxError: Unexpected token (1:1)
1 : <?xml version="1.0" encoding="UTF-8" standalone="no"?>
     ^

[JeffWScott]

@ccampbell thanks for taking a look. I'll see about other options. I appreciate your help.

[ccampbell]

No problem. I am going to close out this ticket for now. Hope you find something that works.

[JeffWScott]

@ccampbell

I went and changed my image imports to direct and got rid of the image router file altogether.

Still not working but I believe I am past that error. If you're willing to help further I can post the new error.

[ccampbell]

Sure. If you commit it to that branch I can have another look.

[JeffWScott]

Thanks!

git clone -b luna-testing https://github.com/Lamden/wallet.git
cd wallet
sudo npm install
npm run luna-test

[ccampbell]

Hey. Just spent some time looking. So this is still the same issue as yesterday. The glob is matching *.svelte so the svg files would have to be renamed .svelte or Luna would have to be updated to allow regexes somehow. I will think on that. I also think there are other issues with just importing App.svelte directly so I switched to another component in the test just to try to get something working.

Changing test-something.js to import this, for example, works:

import Test from '../src/svelte/components/Button.svelte';

When I run the test I see:

$ ~/Sites/luna-testing/bin/luna.js test --svelte="src/**/*.svelte"
🌙  Running tests…
Button has unused export property 'spellcheck'. If it is for external reference only, please consider using `export const spellcheck`
⏳  [==================================================] 100% (1/1)
💔  1 test failed!

test/test-something.js

❌  testComponent

17
18     t.assert(target.innerHTML === '<h1>Hello world!</h1>');
19                     |
                       "<button class=\"button__solid svelte-w4ivrx\" style=\"width: unset; height: unset; padding: 13px 16px; margin: unset; \" type=\"button\"> <div class=\"text-button lable-right\">undefined</div></button>"

Console Logs

<Button> was created without expected prop 'id'
<Button> was created without expected prop 'name'
<Button> was created without expected prop 'click'
<Button> was created without expected prop 'tabIndex'

I first tried with coins/Coin.svelte, but that led to a different error coming from another place:

⚠️  Error: 'encryptObject' is not exported by src/js/utils.js

And sure enough it is not. I wonder if webpack just handles these types of things automatically. In any case, I think that should be a start. If you slowly work your way up to the bigger components you may be able to update them to get them to work.