Skip to content

Svelte bind not working #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mvolkmann opened this issue Jun 2, 2019 · 9 comments
Closed

Svelte bind not working #29

mvolkmann opened this issue Jun 2, 2019 · 9 comments

Comments

@mvolkmann
Copy link

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
Copy link
Contributor

EmilTholin commented Jun 2, 2019

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

mvolkmann commented Jun 3, 2019 via email

@EmilTholin
Copy link
Contributor

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

@mvolkmann
Copy link
Author

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
Copy link
Author

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"

@mvolkmann mvolkmann reopened this Jun 3, 2019
@EmilTholin
Copy link
Contributor

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants