Error: The function wrapper.find().simulate('keypress', {key: 'Enter', keycode: 13}) is not working as expected

Let's discuss further about this query

vue-btn isn't triggering on pressing the enter key

I have designed a sign-in page where users can log in by pressing 'Enter' on the keyboard. Now, I aim to perform a unit test that simulates pressing the enter key automatically logs in the user.

The snippet of the test code I'm working with is as follows:

describe('Login.vue', () => {
    const vuetify = new Vuetify()
    const store = new Vuex.Store({
        actions: {
            login: jest.fn()
        }
    })
    const wrapper = mount(Login, { stubs: ['router-link', 'router-view'], store, vuetify })

    it('logging in via enter key press', async () => {
        wrapper.setData({ email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abded8ced9ebced3cac6dbc7ce85c8c4c6">[email protected]</a>' })
        wrapper.setData({ password: 'Passw0rd' })
        
        await wrapper.vm.$nextTick()
        wrapper.find('[data-cy="input-password"]').simulate('keypress', {key: 'Enter', keycode: 13})
    })
})

Although I have conducted Integration Tests using Cypress successfully, I prefer to finalize unit testing before committing changes to the repository.

Answer №1

Here is the solution that helped me:

await wrapper.find('#myFieldID').vm.$emit('keypress', {type: 'enter'});

In this scenario, the revised line should be as follows:

wrapper.find('[data-cy="input-password"]').vm.$emit('keypress', {type: 'Enter'})

Answer №2

If you want to simulate a keyup event triggering in Vue Test Utils, you can utilize the trigger event feature:

wrapper.find('[data-cy="input-password"]').trigger('keyup.enter')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Caution: The `className` property does not align with Material UI css which may cause issues upon reload

https://i.stack.imgur.com/MxAiY.png If you are facing the error/missing CSS, check out this video for a visual representation. While older versions of similar questions exist on Stack Overflow such as React + Material-UI - Warning: Prop className did not ...

Internal server error frequently occurs when there is an issue with Ajax requests in a Laravel application

Greetings, fellow developers! I am encountering an issue with the comments system in Laravel and Ajax. While it functions correctly with PHP alone, I am facing difficulties when using Ajax. The error message I am receiving is as follows: Status Code:50 ...

What is the best way to refresh a page with AngularJS?

I have a link that, when clicked by the user, triggers a page reload. I accomplished this using the method below...... HTML <div data-ng-hide="backHide" class="offset6 pull-right"> <a href="" data-ng-click="backLinkClick()"><< Back ...

Acquire information from database in Laravel 9 with the implementation of Vue js 3

My goal was to retrieve data from the database and showcase it within the app. This is how I implemented it : <h2 class="lowongan1" v-for="value in list_lowongan"> {{ value.title }}</h2> <p class="descJob1" v ...

Encountering a JavaScript error due to an erroneous character when trying to parse

I need to convert a `json` string into an object format that is extracted from a `.js` file. Here is the `JSON` string located in `document.js`: [ { "type": "TableShape", "id": "63c0f27a-716e-804c-6873-cd99b945b63f", "x": 80, ...

Minimizing the distance between radio label rows

I'm working on a radio button with a label spanning two lines, but the whitespace between the lines is too much. I need to reduce it. Here's my code example: <label for="reg-promo"> <input type="radio" name="promotion" id="registerPr ...

Create a new object by extracting JSON data using JavaScript

I am attempting to extract various data elements from a JSON file and place them into an object. My ultimate goal is to then convert this object back to JSON format, containing only the desired data. I believe that structuring the object like this might w ...

Stagnant variable value after onClick event

After exploring various solutions, none seem to quite fit my needs. I want to update the variable "currentIndex" when a user clicks on an image. Currently, the change occurs within the onClick function but does not affect the outside variable. I am unsur ...

Reinstall software using the information in the package-lock.json file

Imagine this situation: I added certain libraries like jquery and bootstrap using the command npm install. As a result, npm created a package-lock.json file which contains information about the installed packages. When I uploaded my project folder to a g ...

Using JSON parsing to extract an integer as the key in JavaScript

I've been searching for almost 2 hours now, but I can't seem to find anyone using an integer as the key in their json object. The structure of my json object is as follows: {"342227492064425": {"added":"2020-10-04T23: ...

What is the best method for incorporating success icons into my website with vue.js?

Hey everyone, please excuse my lack of expertise as I am a beginner in this field. I'm trying to incorporate success icons into my website using bootstrap or similar tools, but I'm unsure of how to implement the if statement below. If anyone co ...

What is the process for including a custom Jasmine matcher definition in Typescript?

I've been searching around for information on creating custom Jasmine matchers using TypeScript and it seems like a common issue. However, none of the solutions I've come across have worked for me. My setup includes: { "typescript": "2.3.2", ...

I am concerned about the security of my games as they can be easily hacked through right-click inspect. What measures can

As a newcomer to game development, I am creating web games using JS, HTML, and CSS. However, I have encountered an issue with preventing right-click inspect hacking, which has led to people hacking my games through this method. I am wondering, how can I s ...

Uncovering the hidden treasures of checkbox values using jQuery

I've encountered an issue with a form containing checkboxes. Some values are meant to be true by default, so I've hidden them using the following method: <input type=checkbox name="<%= _key %>" checked="checked" style="display:none" /& ...

Tips for resolving the issue: SyntaxError - Unexpected token import

I've encountered this error in the past and have looked at other solutions, but none of them seem to work for my specific issue. My package.json file includes the following dependencies: "dependencies": { "axios": "^0.15.2", "babel": "^6.5. ...

The onChange function in Material UI Text Field is preventing users from inputting additional values

My application contains a custom TextField component. I am facing an issue where I cannot increase the value of the first TextField due to the presence of the onChange method. However, the second TextField does not have the onChange method, and I can succe ...

The process of creating a project with Vue-cli has suddenly come

Whenever I attempt to create a project using vue-cli, it gets stuck at this point: >> vue init webpack test ? Project name test ? Project description (A Vue.js project) I can't even cancel it with ctl + c or any other command. Pressing enter ...

The ASP.NET MVC controller did not receive the JSON object properly due to some missing properties

I am facing an issue when trying to pass a JSON object to my ASP.NET MVC controller. The JSON is set in JavaScript in this way: jsonChildren = '{ "childImproItems" : [{ "Theme":"tralalali" }, { "Theme":"tralalali" }]}'; ... $.ajax({ ...

Vue table does not update when checkbox is unchecked

I am currently utilizing Daisy UI and basic VUE to create a checkbox functionality. When I check the checkbox, it successfully filters the table entries; however, when I uncheck or check another checkbox, the filter does not refresh again. Below is my tab ...

Swap out a portion of HTML content with the value from an input using JavaScript

I am currently working on updating a section of the header based on user input from a text field. If a user enters their zip code, the message will dynamically change to: "GREAT NEWS! WE HAVE A LOCATION IN 12345". <h4>GREAT NEWS! WE HAVE A LOCATIO ...