Vue appears to be having trouble waiting for the axios Post request

While testing a login request, I encountered an issue where jest did not call the mock:

This is my test :

const User = '123123'

jest.mock('axios', () => ({
  get: jest.fn(),
  post: (_url, _body) => new Promise((resolve, reject) => {
    if (_body.username != User) return reject({ data: { auth: false } })
    resolve({
      data: {
        auth: true,
        data: '123456789789213',
        name: 'Indra'
      }
    })
  })
}))

describe('Component', () => {
  let actions
  let store

  beforeEach(() => {
    actions = {
      logIn: jest.fn()
    }
    store = new Vuex.Store({
      actions
    })
  })
test('Logins in server', () => {
    const wrapper = shallowMount(Login, { store, localVue })

    const inputLogin = wrapper.find('[name=login]')
    const inputPassword = wrapper.find('[name=password]')

    //fake user and password
    inputLogin.element.value = User
    inputPassword.element.value = 'Indra1234'

    wrapper.find('button').trigger('click')
    expect(actions.logIn).toHaveBeenCalled()
  })
})

And here is the login function:

methods : {
        AuthUser () {
            if(this.server == "Select a server") return this.$swal('Attention', 'Please select a server!', 'error');
            console.log("Requesting login")
            this.loading = true
            try {
                axios.post(this.server+"/auth",
                {
                    username: this.id,
                    password: this.password
                })
                .then(result => {
                    console.log(result)
                    if(result.data.auth) {
                        this.tk = result.data.data
                        this.nome = result.data.name
                        this.logIn
                        setTimeout(() => {
                            console.log("Hi")
                            $("body, this").css("background-color","#FBF5F3");
                            // this.$router.push('/home')
                            this.$eventHub.$emit('logIn', 1);
                        }, 1000);

                    } else {
                        this.loading = false
                        this.$swal('Attention', 'Incorrect username or password!', 'warning');
                    }
                }).catch((er) => {
                    this.loading = false
                    this.$swal('Sorry', 'A communication error with the server occurred!', 'error');
                    console.log(er)
                })
            } catch (error) {
                this.loading = false
                this.$swal('Sorry', 'An error occurred while logging in', 'error');
                console.log('Internal Error: ', error)
            }

        }
    }

When running the test, it can be seen that the console log "Requesting login" is being called. The test configurations were set up using Vue CLI 3 and I referred to for guidance.

Answer №1

It appears that the promises are not being flushed properly. Have you considered using the flush promise library?

npm i --save-dev flush-promises

and then...

// at the top of your file
import flushPromises from 'flush-promises';

//...
    wrapper.find('button').trigger('click');
    await flushPromises();
    expect(actions.logIn).toHaveBeenCalled();

For more information, check out: https://vue-test-utils.vuejs.org/guides/testing-async-components.html

Answer №2

The issue arose when attempting to set the input values.

Upon logging console.log(wrapper.vm.id, wrapper.vm.password), both appeared as null.

To address this problem:

    inputLogin.element.value = User
    inputLogin.trigger('input');
    inputPassword.element.value = 'Indra1234'
    inputPassword.trigger('input');

Additionally, ensure to include flushPromises() as well.

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

Tips for creating a custom axios response depending on the error code returned by the response

I am currently working on implementing a global error handling system in my Vue application. Within my project, I have an api.service.js file that contains the necessary code for Axios setup and various HTTP request functions such as get and post: /** * S ...

A directive containing a template

I'm facing a unique challenge where I have to nest a template inside another template within my directive. The issue arises because AngularJS doesn't recognize ng-repeat code inside attributes. In an ideal scenario, here is how I envision my cod ...

Periodically transmit information to a Google Script web application

I am currently working on a Google Script web app to automatically update data from a Google Sheet every 30 minutes. I initially attempted using the page refresh method, but encountered an issue where the web app would display a blank page upon refreshin ...

Move the location of the mouse click to a different spot

I recently received an unusual request for the app I'm developing. The requirement is to trigger a mouse click event 50 pixels to the right of the current cursor position when the user clicks. Is there a way to achieve this? ...

Optimal techniques for leveraging CSS within Mui and Reactjs

Just starting out with mui, I'm currently working on styling CSS for mui components like so <Typography variant="h5" sx={{ fontWeight: "bold", color: "#1a759f", display: "flex", ...

Understanding how to deduce parameter types in TypeScript

How can I infer the parameter type? I am working on creating a state management library that is similar to Redux, but I am having trouble defining types for it. Here is the prototype: interface IModel<S, A> { state: S action: IActions<S, A&g ...

Is there a way to convert arrow functions in vue files through transpilation?

I have developed a Vue application that needs to function properly in an ES5 browser (specifically iOS 9). One issue I've encountered is that some of the functions within the Vue components are being transformed into Arrow functions: ()=>, which i ...

Using Django Crispy forms to dynamically hide fields based on the value of another field

What is the best way to dynamically hide or show a form field in Django crispy forms depending on the selected value of another field in the form? For example: Field A contains a dropdown menu with options '1' and '2'. Field B should ...

Similar to the reference of $(this) in jQuery, there is a similar concept in Vue.js

When working with jQuery, the use of $(this) allows for accessing elements without relying on classes or ids. How can we achieve a similar outcome in Vue.js? ...

Could there be a mistake in the way array combinatorics are implemented in JavaScript?

Having encountered the necessity for generating unique combinations when dealing with multiple arrays, I developed this script. While it functions as intended during the combination process, storing the result in a final array yields unexpected outcomes. ...

JSON containing attributes represented by Unicode characters

During the development of my web application, I am interested in utilizing JSON objects with Unicode attributes as shown below: a = { ονομα:"hello" } Subsequently, I would like to access it in this manner: a.ονομα Alternatively, exploring lo ...

What causes the index to consistently be the final index when passing it to the MenuItem onClick function while iterating over a State array using map?

There is an array of objects living in a state named talks [ { "firstName": "B", "lastName": "W", "day": "2022-09-30T23:06:26.000Z", "reasons": [ ...

Tips for achieving a stable Vuetify configuration

Working on a project using vue 2 and vuetify, initially everything was going smoothly. However, after some usage, I encountered the following error: Module not found: Error: Can't resolve 'vuetify/src/stylus/app.styl' in '/Users/marce ...

Creating a shared function using TypeScript

Having a vue3 component that displays a list of items and includes a function to delete an item raises a concern about checking parameters and specifying the array for the filter operation. The goal is to create a universal function using typescript. <t ...

Utilizing AJAX and PHP to Showcase Data

Instructions for program flow: 1. When the page loads, the chart will display the total sales from all branches. 2. Upon selecting a specific branch from the dropdown menu, the chart should show the total sales for that particular branch. I am encounterin ...

Implement a mouseenter event to all input elements that have specific names stored in an array, utilizing jQuery

I'm struggling to figure out how to apply my function to all input elements with a name that is included in my array. This is what I've attempted so far: var names = ["name1", "name2"]; $(document).ready(function(){ $('input[name=names[ ...

Implementing a Push System without using node.JS

I am looking to develop a notification system similar to Facebook's, where notifications appear on the bottom-left side of the screen when someone interacts with your posts, for example. However, my challenge is that I need the server to send real-ti ...

Tips for creating a dynamic menu with animated effects

Check out my fiddle here: http://jsfiddle.net/k3AHM/23/ $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 110) { $('.menu-container').addClass( "fix-menu" ).animate('top', '-3px&a ...

How come once I close a PrimeNG modal that is defined within a child component, I am unable to reopen it?

Currently, I am developing an Angular application that utilizes PrimeNG. In the process, I encountered a challenge. Initially, I had a component with a PrimeNG Dialog embedded within (refer to this link), and it was functioning properly. To streamline my ...

Error: The function $.getScript(...).done cannot be found

Encountered a strange situation here.. . The following code is functioning properly: // this code working perfectly $.getScript( "https://wchat.freshchat.com/js/widget.js" ).done(( script, textStatus )=>{ // run something }); . . However, if ...