jest - SyntaxError: Unexpected token 'export'

I am currently utilizing vue.js and attempting to incorporate async/await in jest (with vue utils test).

  it('async/await test', async () => {
    await wrapper.setData({
      foo: 'bar',
    });
    // ...
  });

Although I can use the import statement, an error occurs when running the 'yarn test' (jest) command, even though I did not export anything from the test file.

Details:
export default function _asyncToGenerator(fn) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1517:14)
      at Object.<anonymous> (__test__/TestComponent.test.js:9:49)

Here are my configuration files:

// jest.config.json

{
  "verbose": true,
  "testEnvironment": "node",
  "moduleFileExtensions": ["js", "vue"],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/resources/assets/js/components/$1"
  },
  "transform": {
    "^.+\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
  "snapshotSerializers": ["<rootDir>/node_modules/jest-serializer-vue"]
}

// babel.config.jss

module.exports = {
  presets: [
    '@vue/app',
    ['@babel/preset-env', { targets: { node: 'current' } }],
  ],
  plugins: [
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-logical-assignment-operators',
    '@babel/plugin-proposal-numeric-separator',
  ],
};

environment

  System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE     
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD     
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD       
  npmPackages:
    jest: ^27.0.6 => 27.1.0
  +
  "@vue/test-utils": "^1.2.2"
  "@babel/core": "^7.15.0"
  "vue": "^2.6.10"

How can I resolve this issue? Below is a link to my sample test file code: https://gist.github.com/charmjeh/544455d49ff184750f17df8bb460b876

Answer №1

My solution to this issue involved incorporating unit testing into my workflow, which was done by utilizing the command yarn test:unit

$ vue add unit-jest

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

Simulate asynchronous function in imported module

Is it possible to monitor the behavior of an asynchronous function in a module that has been imported? jest.mock('snowflake-promise'); import { Snowflake } from 'snowflake-promise'; describe('Snowflake', () => { let sn ...

What is the process for reinserting a list item into the nested elements?

Looking for help with manipulating a menu in HTML? I have a menu that I want to modify by removing and adding list items. While I've had success removing items, I'm struggling to properly use the add method. Here's an example of what my menu ...

Unlocking JSON Keys Using Dashes

When working with JSON objects, we typically access elements using dot notation. For example, var obj = {"key": "value"}; var val = obj.key;. However, what if the key contains hyphens, like in this case: var obj = {"key-with-hyphens": "value"};? Do we ne ...

What is the best method to retrieve JSON data from a different domain?

I am exploring the Google Images API and need to retrieve JSON data from an external domain. In the past, I have used the ajax function to fetch JSON from my own server. However, this time I will be retrieving it from: https://ajax.googleapis.com/ajax/ser ...

VueJS Component has trouble refreshing the DOM content following an AJAX Promise

I've encountered issues updating data in my Vue application after an AJAX callback. I have previously resolved similar problems by using Vue.set, but for some reason, it's not working for me today. The only difference is that I am calling a serv ...

Transform a group of objects in Typescript into a new object with a modified structure

Struggling to figure out how to modify the return value of reduce without resorting to clunky type assertions. Take this snippet for example: const list: Array<Record<string, string | number>> = [ { resourceName: "a", usage: ...

NodeJs:- Retrieve data from the initial dropdown menu and display it dynamically in the secondary dropdown

Currently, I am working on a dropdown list and facing an issue where the results displayed in the second dropdown need to be filtered based on the selection made in the first dropdown. The EJS code snippet that I am using is: <div class="form-group"& ...

Tips for utilizing a Three.js curve to guide the movement of a mesh along a specified path

Developing an animation, currently at this stage: http://jsfiddle.net/CoderX99/66b3j9wa/1/ Please avoid delving into the code, it's written in CoffeeScript and may not be beneficial for your mental well-being. Imagine a "nordic" landscape with ship ...

What is the method for incorporating locales into getStaticPaths in Next.js?

I am currently utilizing Strapi as a CMS and dealing with querying for slugs. My goal is to generate static pages using getStaticPaths and getStaticProps in Next.js. Since I'm working with multiple locales, I have to iterate through the locales to re ...

Learn how to smoothly transfer a URL from JavaScript to HTML and initiate the download process

I created a website that solely relies on HTML5, CSS and JavaScript to function. The core functionality of this website involves utilizing YouTube URLs. I have stored the URL of a specific YouTube video as a variable, now I am looking for a way to transfer ...

Transfer a term to a different division - JavaScript Object Model

I am trying to achieve a specific task where I need to move one term under another in SharePoint. However, despite my efforts using JSOM and SharePoint 2013, I have not been able to find a direct method for moving terms. The code snippet I have used below ...

Obtain JSON information and integrate it into an HTML document with the help of

I am currently working on a PHP/JSON file named users-json.php. <?php include_once('../functions.php'); if (!empty($_GET['id'])) { $GetID = $_GET['id']; $query = "SELECT Username, Firstname WHERE UserID = :ID"; $stmt = $d ...

Removing single quotes and replacing them with spaces when passing data from JavaScript to MySQL

I'm currently focused on JavaScript using Hapi.js in my role at the company. My main task involves retrieving data from MongoDB and transferring it to a MySQL database. The challenge arises when dealing with data that contains single quotes within th ...

Is it possible to automatically update views immediately after performing a CRUD operation?

In my basic CRUD application, I am facing an issue when making an AJAX call to delete a document. I want the view to be updated with the new list of documents immediately after deletion. I have experimented with using ajaxStop / ajaxSuccess and setTimeout ...

Retrieve the current language from a non-page component on the server side with the help of Next.js and the next-i18next

I am working on a nextjs application that utilizes the next-i18next library for internationalization. I'm struggling to figure out how to access the current language on the server-side within a component that is not a page. On the server side, you ca ...

The group list displayed in the dialog box has the title appearing in an incorrect position

The list group component is rendering data incorrectly - the title that should be displayed on the slot activator tile is also being rendered along with the drop-down elements. Even after using an example from the vuetify.js API website: https://vuetifyjs ...

Tips for assigning a value to an Option element when the selection changes in JSP

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- ...

What steps can be taken to resolve the error ERROR TypeError: undefined is not an object when evaluating 'userData.username'?

.I need help fixing this error ERROR TypeError: undefined is not an object (evaluating 'userData.username') Currently, I am working on a small application where users are required to allow permission for their location in order to save their cit ...

Creating a secure route with Vue and Firebase using Google Identity Platform

After successfully integrating Firebase (also known as Google Identity Platform) into my Vue project, I decided to secure specific routes. To achieve this, I made the following amendments: // router/index.js { path: '/profile', ...

I want to know how to shift a product div both horizontally and vertically as well as save its position in And Store

How can I animate and move a product div horizontally & vertically, and save its position for future visits? I need to move the div with animation in a specific sequence and store the position using PHP. Buttons <button type="button" href ...