MockComponentLatest.js is very outdated and doesn't work on recent version of svelte

[cibernox]

I've noticed at least several issues, like cannot read $$ of undefined or cannot read context of undefined and with the missing append_styles arguments (https://github.com/sveltejs/svelte/blob/dbbac2837e987ab3cf76ea901e4956c057919a96/src/runtime/internal/Component.ts#L107)

Maybe this file can be updated to support 3.40+

[kobejean]

@cibernox I'm publishing version v1.0.1 to update MockComponent. Could you let me know if it solves your issue? I'd also like to add unit tests that cover the special case you are dealing with because I don't think any of my existing tests were able to catch the issue.

Also, I had a question about the two lines here:

		this.$$ = {};
		options.target = options.target || {};

https://github.com/cibernox/svelte-mock/blob/faadf5300a1cd84f92be18710d09ea190f647aaa/src/mock/MockComponentLatest.js#L104-L105

I actually had to remove them to fix failing test cases so I was wondering if your issue is still fixed without them.

[cibernox]

@kobejean Sadly, those two lines are precisely the lines that fix the issue I am facing. The reason why those lines are needed is because starting in 3.40, svelte initializes components differently. This is the diff between 3.39 and 3.40: https://github.com/sveltejs/svelte/compare/v3.39.0...v3.40.0#diff-da9bae4e28c441de5ba3a074e30775fe69109100b3d921ad8f2592d93cd67b7f

On my tests apparently I have a mock component that is the parent of another mock component. So when the child component tries to access parent_component.$$ it blows

[cibernox]

Also, seems that the test case that is failing without those lines is invoked some mocked component using <svelte:component this={chooseComponent()}></svelte:component>.

[kobejean]

@cibernox Ok hmm, thats good to know.

I am able to add this.$$ = {}; without tests failing but not options.target = options.target || {};. I'm also having trouble reproducing your issue. It seems like I should already have tests that cover the case you described if I understand corrently. Could you take a look at these two test cases and tell me whats different with your situation?

Dynamic instantiation of a mocked component: Svelte code Test Case

Mocked parent with mocked slotted child: Svelte code Test Case

And if you could write a test case that covers your issue that would be great. To run tests on your machine, run:

npm install
npm install [email protected] #or what ever version you want to test out
npm run test