Svelte bind not working

[mvolkmann]

It seems that in the context of a test the bind here does not get processed:

<input data-testid="my-input" bind:value={myVar} />

I do this in a test:

const input = getByTestId('my-input');
fireEvent.change(input, {target: {value: 'some text'}});

The input value gets changed, but the variable myVar does not.

[EmilTholin]

Hi @mvolkmann!

Try to wait for the next microtask to run with the help of tick and see if that works.

import { tick } from 'svelte';

// ...

const input = getByTestId('my-input');
fireEvent.change(input, {target: {value: 'some text'}});
await tick();
// check value of myVar somehow

[mvolkmann]

I got the same result with that. If you're interested, all the code is at https://github.com/mvolkmann/svelte-todo. It's a basic Todo app. The test in question is in src/TodoList.spec.js. The expect after the call to "await tick()" fails.

[EmilTholin]

If you look at the generated code of a bound input you will see that Svelte generates code for listening to the input event, not the change event. You could try to fire a input event instead.

[mvolkmann]

Thanks for the tip. I tried that, but nothing changed. The value of the input is getting set like I want. The issue is that the bind isn't being processed and the variable todoText never gets set. If it would help, I can create a smaller example.

…

On Sun, Jun 2, 2019 at 1:48 PM Emil Tholin ***@***.***> wrote: If you look at the generated code of a bound input <https://svelte.dev/repl/264d7935a31442d1829eadafc5daf675?version=3.4.4> you will see that Svelte generates code for listening to the input event, not the change event. You could try to fire a input event instead. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29?email_source=notifications&email_token=AAATLUHW734ZOFPKPUK4Y6LPYQIXDA5CNFSM4HSDDEH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWX3VDY#issuecomment-498055823>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAATLUH5L76ELO7HT44YTNTPYQIXDANCNFSM4HSDDEHQ> .

-- R. Mark Volkmann Object Computing, Inc.

[EmilTholin]

A minimal example that we could clone and run would be great.

[mvolkmann]

I figured it out! Creating a small example helped. It is at https://github.com/mvolkmann/svelte-testing-library-issue. My problem was the placement of my call to "await tick()". I needed to do that after I fired a click event on a button. Thanks for guiding me through this!

[mvolkmann]

I wonder if I'm pulling in too many dependencies. There sure are a lot! Do you think I need all of these?

    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@testing-library/svelte": "^1.7.0",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.8.0",
    "core-js": "^3.1.3",
    "jest": "^24.8.0",
    "jest-transform-svelte": "^2.0.2",
    "regenerator-runtime": "^0.13.2",
    "svelte-jest": "^0.2.0"

[EmilTholin]

Hard to say. You can try to remove them one by one and see what happens, but most of them are typical of a Jest test setup.

[RaevensRobbe]

Issue was my mistake I gave the wrong variable and had issues with changing multiple items. But solved it by changing the variable and using a function with a parameter.