What might be causing my Vue unit test to overlook a function?

I am in the process of creating unit tests for my component dateFormat.js using Jest. The focus is on testing the function formatDateGlobal. Here is an excerpt from the test:

import DateFormat from '../dateFormat';

describe('dateFormat.js', () => {
  let date1;

  beforeEach(() => {
    date1 = {
      date: '',
    };
  });

  it('This test should return an empty string', () => {
    // Act
    const returnedDate = DateFormat.formatDateGlobal(date1);
    // Assert
    expect(returnedDate).toBe('');
  });

In dateFormat, I'm exporting the formatDateGlobal function like this:

export default formatDateGlobal;

The tests are structured correctly, but I encountered an error:

TypeError: _dateFormat.default.formatDateGlobal is not a function

      27 |   it('Then it should return an empty string', () => {
      28 |     // Act
    > 29 |     const returnedDate = DateFormat.formatDateGlobal(date1);
         |                                     ^
      30 |     // Assert
      31 |     expect(returnedDate).toBe('');
      32 |   });

Currently unsure about the cause of this issue, but I suspect it has something to do with the way I'm exporting the function.

Answer №1

By importing formatDateGlobal into the variable DateFormat, you can easily use

const returnedDate = DateFormat(date1);

It seems like you are attempting to achieve something similar to this:

const returnedDate = formatDateGlobal.formatDateGlobal(date1);

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

What is the purpose of passing data into the 'success' function of an AJAX request?

Recently, I embarked on a journey to learn jQuery and AJAX, but I found myself tangled in confusion when it came to AJAX requests. To gain practice, I decided to create a simple TodoApp using Node, jQuery, and Bootstrap. While I managed to grasp GET and P ...

The data returned by AJAX is not in the correct order in the database

function retrieveData() { <?php $stmt = $conn->prepare("SELECT id, name FROM data"); $stmt->execute(); $stmt->bind_result($id ,$name); while ($stmt->fetch()) {?> processData (<?php echo "'$id'";?>,<?php echo "&apo ...

Using jQuery UI Dialog with pjax for dynamic content loading

I'm currently utilizing pjax within a web application that incorporates jQuery UI dialogs. One issue I've encountered is that the div element responsible for creating the dialog gets displaced from its original container in the DOM once the dialo ...

Incorporate fresh data into dropdown options upon selection using Vue3

Can anyone assist me with populating specific input fields on a form using Vue 3? Currently, when a user selects an option from my dropdown menu, all inputs are displayed instead of just the relevant ones. Below is the select dropdown code: <select v- ...

Why is my NextJs app loading slowly on Safari but quickly on Chrome?

Currently, I am in the process of developing a web app using nextjs. I have encountered some issues with linking to pages, particularly the home page which contains multiple svgs and images. The performance lags when using Safari, as it does not show a loa ...

Steps for embedding a dynamic 3D model onto a website with THREE.js

Seeking guidance on integrating animated 3D models onto a webpage using THREE.js. Currently, I have successfully loaded a static 3D model named 'aaa.gltf' with auto rotation and orbit control functionality. However, when trying to load another an ...

Retrieving image source from JSON data using AngularJS

I am attempting to retrieve an image from an API using AngularJS. The approach I'm taking involves triggering the $http function with a link and attempting to extract the image URL from the JSON response to display it in the HTML. However, despite re ...

Why are double curly brackets used in the JSX syntax of React?

In the tutorial on react.js, a specific usage of double curly braces is highlighted: <span dangerouslySetInnerHTML={{ __html: rawMarkup }} /> Building on this, in the second tutorial titled "Thinking in react" found in React documentation: <sp ...

Implementing the decrement functionality within an onclick event handler for a variable

Can someone assist me with this issue? I am trying to use a variable ID in HTML to call a function on a JavaScript page. For example: (Minus button not functioning) <button class="minus-button quantity-button button" type="button" name="subtract" onc ...

Tips for transferring a variable from Next.js to a plain JavaScript file

When it comes to Canvas Dom operations in my NextJs file, I decided to include a Vanilla JS file using 'next/script'. The code for this is: <Script id="canvasJS" src="/lib/canvas.js" ></Script>. Everything seems to ...

How to Call a Method from a Different Component in Vue 3

Just a quick question, as I am still getting the hang of Vue.js... Greetings! Is it possible to call a method from one component in another? Let's say I have two components: componentOne.vue <template> <section> <div> ...

Preserve the height of the previous div following an AJAX request

I am currently facing an issue where I have a script that utilizes ajax to receive a response containing a cart string (html code) with items from the cart. Inside the response handler, there is another script that sets the height of each div in the cart s ...

Tips for concealing a "PARTICULAR TAB BAR ITEM" on a bottom tab bar in @react-navigation/bottom-tabs

Check out this video displaying my current visible bottom tab items: Home, My Account, Cart, and Menu. Watch here I have additional bottom tab items like SettingsView that I want to render on the screen but keep them hidden from the bottom tab bar itself. ...

Tips for choosing the injected HTML's List Element (li) while ensuring it remains concealed

How do I hide the list item with iconsrc="/_layouts/15/images/delitem.gif" image when this div is injected by a first party and I am a third party trying to conceal it? $("<style> what should be inserted here ???? { display: none; } </style>") ...

Implementing Window.Open function within a jQuery Modal

I've set up my Modal Div like this: <div id="dialog-modal" title="Open File"> <img alt="progress" src="images/ajax-loader.gif"/> </div> When I click the button, the modal appears and I can see the progress icon. <sc ...

The reason behind my unsuccessful attempt to utilize AJAX with the Google GeoChart API

Learning about JavaScript is exciting! I recently tried incorporating a Google Geochart to generate visual reports. The sample code looked like this: function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country ...

Having trouble displaying information in JavaScript after using getScript() to retrieve data from an API containing a JSON block database

I'm a newcomer to the world of Ajax/json/jquery and I find myself with a few inquiries. Currently, I am working with an API located at which contains a JSON block that looks something like this [{"id":"1","FirstName":"Micheal","LastName":"Kooling"}, ...

I noticed that my jquery code is injecting extra white space into my HTML5 video

Ensuring my HTML5 background video stays centred, full-screen, and aligned properly has been made possible with this jQuery snippet. $(document).ready(function() { var $win = $(window), $video = $('#full-video'), $videoWrapper = $video. ...

Automate brush control and transmit pertinent data through coding

Extending on the query from yesterday's thread, I am working towards implementing multiple brushes. While my current brute force method is functional, I require additional functionality to programmatically manage each of these newly created brushes. ...

Enabling Javascript's power-saving mode on web browsers

I created a JavaScript code to play music on various streaming platforms like Tidal, Spotify, Napster, etc., which changes tracks every x seconds. If the last song is playing, it loops back to the first song in the playlist since some websites lack this fe ...