1

In my html component i've used an onBlur attribute in div. While writing the test case for the same i am unable to cover the javascript method which I've called in html. My div looks like this

<template>
    <div class="container" onBlur={onBlurEvent}>
       ...
    </div>
</template>

Js:

onBlurEvent(){
    //some code
}
0

First off: div elements don't receive focus by default, so you can't register an onblur event unless you first add tabindex="0" or contentEditable (see StackOverflow thread). Without this, I'm not sure your function will execute in a browser, let alone in Jest.

Side note: the convention here is to use lowercase onblur vs. camel-case onBlur, although both technically will work.

Now more to the point: I have had success calling blur() in Jest on an element that has focus. If your element is able to receive and lose focus, you should be able to do this:

let container = element.shadowRoot.querySelector('div.container');
container.focus();
container.blur();
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.