Do not attempt to log after tests have finished. Could it be that you overlooked waiting for an asynchronous task in your test?

Currently, I am utilizing jest in conjunction with the Vue framework to create unit tests. My test example is successfully passing, however, I am encountering an issue with logging the request. How can I resolve this error? Is there a mistake in my usage of async within jest? The test snippet is provided below followed by the details of the error.

Test

describe('Home', () => {
    test('Example Test', async () => {
        const wrapper = mount(Home2)
        
        expect(wrapper.html()).toContain(0)
    })
})

Error despite test passing

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.324 s
Ran all test suites.

  ●  Cannot log after tests are done. Did you forget to wait for something async in your test?
    Attempted to log "Get Error: Error: Network Error
        at createError (/home/user/Documents/Code/RRMEC/src/frontend/node_modules/axios/lib/core/createError.js:16:15)
        at XMLHttpRequest.handleError (/home/user/Documents/Code/RRMEC/src/frontend/node_modules/axios/lib/adapters/xhr.js:84:14)
javascriptvue.jsunit-testingjestjs

Answer №1

After some experimentation, I discovered that utilizing shallowMount resolved the issue.

Integrate shallowMount from vue test utils:

import {mount, shallowMount} from '@vue/test-utils';
import Home2 from '@/views/Home2';

Substitute instances of mount with shallowMount:

describe('Home', () => {
    test('Example Test', async () => {
        // Arrange - Engages in mounting the component for testing purposes and specifies the component's elements to test
        const wrapper = shallowMount(Home2)
        // Act - Initiates an action on the component

        // Assert - Verifies if the action taken on the component aligns with the desired outcome
        expect(wrapper.html()).toContain(0)
    })
})

An alternative option is to disable logging by executing --silent. Execute your test using the command yarn:test --silent

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

Having trouble loading CSS and JavaScript files after building with vue-cli and webpack?

I'm working with koa2 as the backend and using koa-swig to handle page rendering. The project structure looks like this: https://i.stack.imgur.com/zYGNS.png Within the dist folder, you'll find index.html and a static directory containing all CSS ...

webpackvue.jsvuejs2

Observing the occurrences of JavaScript events

Is there a way to track all JavaScript events in the browser? Such as, identifying the functions that have been executed and the parameters that have been passed in each JS file? I'm dealing with some obfuscated code and I'm looking to determine ...

javascriptfirebug

Hover over a ListItem

Looking for advice on how to incorporate a Mouseover feature into a Material UI ListItem from the following link: http://www.material-ui.com/#/components/list. As the "SecondaryText" is limited to 2 lines, I am exploring options to display additional data ...

javascriptreactjsmaterial-ui

The issue with combining Laravel 5.4 event broadcasting and Vue.js has been a challenging obstacle to

Looking to set up a chat system using Laravel 5.4, Vue.js, and Pusher API with Echo. I have tried twice to establish communication with Pusher, but I haven't received any callbacks in my Vue component. I am working locally with MAPM. I have installed ...

phplaravelvue.jspusher

The user could not be deserialized from the session

I am having an issue with deleting users from my database. When a user is logged in and I try to refresh the page after deleting the user, I encounter the following error message: Error: Failed to deserialize user out of session Below is the code snippet ...

javascriptnode.jspassport.js

Clicking to remove added child element

I have written a script that creates an image popup when the site loads. Here is the code: <script type="text/javascript"> function showPopup() { var div = document.createElement('div'); div.className += 'popup'; div.inne ...

javascripthtmlcss

Navigating to the parent Vue component in a Vue3 project with Composition API structure in WebStorm

After transitioning to Vue3 and embracing the Composition API style, I find myself missing a small convenience that I had when developing in the previous Options API pattern. In WebStorm/IntelliJ IDE, I used to be able to command-click (Mac) on the "export ...

javascriptvue.jsvuejs3webstormvue-composition-api

Jquery Query: Is it possible to incorporate variables into CSS properties?

I manage a website that supports multiple languages, and I want to adjust the position of my container based on the selected language. To achieve this, I attempted the following code: prop = lang == 'ar' ? 'right' : 'left'; $ ...

javascriptjquerycss

Employing various Class Methods based on the chosen target compiler option

Is there a way to instruct TypeScript to utilize different implementations of methods within the same class, based on the specified target option in the tsconfig.json file? I am currently transitioning one of my scripts to TypeScript to streamline managem ...

javascripttypescriptclass

ASP.NET ensures that the entire page is validated by the form

Is it possible to validate only a specific part of the form instead of the entire page? Currently, when I try to validate textboxes on the page, the validation is applied to all textboxes. Here are more details: https://i.stack.imgur.com/eowMh.png The c ...

javascriptc#htmlasp.net

Bundling sub-components using Rollup for NodeJS application packaging

My ES6 library consists of several sub-modules arranged like this: - package.json - lib - my_package - file1.js - file2.js - sub_module1 - file3.js - file4.js Currently, I import modules within my package using file resolution r ...

javascriptnode.jsrollupjs

Show an HTML image encoded in base64 from its origin

Is there a way to embed a base64 image in HTML without having to paste the entire code directly into the file? I'm looking for a more efficient method. For example: <div> <p>Image sourced from an online repository</p> <img src=" ...

javascripthtmlbase64

Organize information in a React table following a predetermined sequence, not based on alphabetical order

As a beginner with React, I'm looking to sort my data by the column "Status" in a specific order (B, A, C) and vice versa, not alphabetically. The data structure looks like this: export interface Delivery { id: number; name: string; amount: num ...

javascriptreactjstypescripthtml-table

Clicking on ng-click can lead to the dissociation of the Angular factory

My situation involves a factory with a series of prototypes that need to call each other. The issue arises when the reference to "this" is mistakenly applied to the html template instead of the original factory class when using ng-click. For example: ang ...

javascriptangularjs

Don't worry about Higher Order Components while conducting tests on React Components

Currently, I am attempting to test a straightforward Material UI select form that utilizes a FormControl and is exported with withStyles. In my testing scenario, the goal is quite simple: I wish to confirm that my component appropriately renders a child el ...

reactjsjestjsmaterial-uienzyme

Implementing Asynchronous Rendering in React Router 4

I've been working with React Router 4 and trying to implement Redirect(Auth) following a guide. However, I'm facing an issue with rendering based on the promise returned by an AJAX call. It seems like my rendering logic inside the promise is not ...

javascriptreactjsasynchronousreact-routerreact-router-v4

What is the best way to retrieve the second to last element in a list

When using Protractor, you have convenient methods like .first() and .last() on the ElementArrayFinder: var elements = element.all(by.css(".myclass")); elements.last(); elements.first(); But what about retrieving the element that comes right before the ...

javascriptangularjsseleniumtestingprotractor

Determine the most recent API response and disregard any outdated responses from previous calls

I am currently working on a search page where the user can input text into a search box. With each character they enter, an ajax call is made to update the UI. However, I am facing an issue in determining the response from the last API call. For example, i ...

javascriptajax

Persistent navigation once fullscreen banner is completed

I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code. HTML: <div id="hero" ...

javascripthtmlcssfullscreen

Storing a dynamically created grid of inputs using a consistent ng-model

I have the following code snippets: $scope.createPack = function(informationsPack, informationsActivite) { PackService.add(informationsPack, informationsActivite) .then(function(res) { $state.go(&apos ...

javascriptangularjs