Using TypeScript to define values with the placeholder "%s" while inputting an object as a parameter

One common way to decorate strings is by using placeholders:

let name = "Bob";
console.log("Hello, %s.", name) // => Outputs: "Hello, Bob."

I'm curious if there's a way to access specific values within an object being passed in without specifying the key. This scenario arises during testing with Jest, particularly when looping through an array of objects:

let people = [
  {
   id: 1,
   name: "Bob",
   age: 25
  },
  {
   id: 2,
   name: "Fred",
   age: 19
  }
];
describe.each(people)(
  `When the person is %s`,
  (person) => {
    it(`It should say "Hello, ${person.name}`, () => {...})
  }

My goal is for the console output to display:

"When the person is Bob > It should ..."
... however, the current output is:

"When the person is {
   id: 1,
   name: "Bob",
   age: 25
} > It should ...

Is there a method to use something like '%s.name' as a decorator before the object reference is provided, to make the test output simpler?

Answer №1

printf-style substitutions lack the ability to determine on their own, so you must provide the name separately.

If you wish to avoid repetition in your tests, one approach could be:

let people = [
  // ...
].map(person => ([ person.name, person ])); // <-----------

describe.each(people)(
  `When referring to %s`,
  (name, person) => { //                       <-----------
    it(`The greeting should be "Hello, ${name}`, () => {/* ... */})
  })

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

Strategies for increasing a value within an asynchronous function

I'm facing an issue with incrementing the variable loopVal inside a promise. I've tried to increment it without success. Any ideas on how to make this work? const hi = function(delay) { let loopVal = 1; return new Promise((resolve, reject) ...

Tips for analyzing a JSON response from a meme API using HTML and JavaScript

I'm looking to integrate an API into my website in order to fetch random memes from reddit. The API was developed by D3vd and can be found on github at When I make a request to (the api), the response typically looks like this: { "postLink ...

Error encountered while trying to display the react-bootstrap table

I am having trouble rendering sample data using react-bootstrap tables. Every time I try, I encounter the error: TypeError: Cannot read property 'filter' of undefined I've searched on various platforms and visited multiple links, but I ca ...

Issue with React Hook Form - frequent failure in submitting the form

I have implemented the useForm hook from https://www.npmjs.com/package/react-hook-form. However, I am encountering some inconsistent behavior where it sometimes works immediately, sometimes requires a page refresh to work, and sometimes doesn't work a ...

Troubleshooting: Issue with AngularJS $location.path functionality

I have some queries related to the usage of $location.path(/helpmeunderstand). I have a method called login() and when the login credentials are successful, I want to redirect to $location.path(/login/:username). However, instead of displaying the username ...

Displaying the Selected Value from the DropDown in the Menu

I am working with Bootstrap5 and have the following dropdown menu in my code. Instead of displaying "Year," I would like to show which member was selected. How can I achieve this? <div class="dropdown"> <button class="btn btn- ...

Retrieving Data from Database Using Laravel and Ajax Post-Update

I am facing an issue with my edit form, designed for admins to edit book details. Upon submitting the form, the values are updated in the database successfully. However, the page fails to load the updated values into the form without requiring a refresh/re ...

Changing states in next.js is not accomplished by using setState

Struggling to update the page number using setCurrentPage(page) - clicking the button doesn't trigger any state change. Tried various methods without success. Manually modified the number in useState(1) and confirmed that the page did switch. import ...

What is causing the 'Invalid Hook Call' error to appear in React?

I have recently started learning React and I am currently working on converting a functional component into a class component. However, I encountered an error message that says: Error: Invalid hook call. Hooks can only be called inside of the body of a fu ...

The Iframe on the webpage is automatically refreshing once a submission is made, which is not a feature present in the original version of

Within my newsletter.html file, I have set up a newsletter where users can submit their email addresses, which are then stored in my JSON file. In homepage.html, I embedded an iframe from the newsletter.html file. Everything seems to be working fine, exce ...

Enable my textbox to interpret the html img tag

Is there a way to display emoji images instead of emoji symbols when inserting them into my textbox? For example, can I show the image representation of ':)' instead of just the symbol itself? ...

Assigning value to a member variable in a TypeScript Angular class

Currently, I am in the process of learning Angular. To enhance my skills, I am developing a simple web application using Angular and Spring Boot. One challenge I encountered is assigning a variable to the member variable of a Class. import { Injectable } f ...

The radar chart created with amchart.js disappears when placed within bootstrap columns

I'm encountering an issue while trying to display radar charts using amchart.js in bootstrap columns. The "amStockGraph" charts render perfectly, however, the radar charts appear blank with no errors in the console. Any advice on this matter would be ...

problem encountered with data not being received by Java servlet

I am having difficulty sending canned json data to a servlet using jquery ajax on the Google App Engine. Despite catching the call in the debugger and inspecting the request, I consistently find that the parameters map is null... Any assistance would be g ...

Unlocking rotation on a single screen in a react native application can be achieved by altering

I attempted to use react-native-orientation within a webview in order to make it the only view that would rotate. import React, {useEffect} from 'react'; import { WebView } from 'react-native-webview'; import Orientation from "react-na ...

Passing slots to child components within a VueJS application - A helpful guide

Within my application, I frequently utilize a list and list_item component. To provide a general idea: contact_list.vue <template lang="pug"> .table .table-header.table-row .table-col Contact .table-col Info .tabl ...

Refreshing a webpage with JavaScript directly from the server (2021)

Utilizing Javascript, I have successfully implemented a cookie setting feature that allows users to switch between normal and classic theme versions on my website by clicking a checkbox. The backend of my application is powered by PHP. My goal is to access ...

Angular: Connecting template data to different visual presentations

Looking for a solution to display data and map values to another presentation without needing complex ngIf statements or creating multiple components. Check out this sample: https://stackblitz.com/edit/angular-9l1vff The 'vals' variable contain ...

How can I integrate Apple remote support into a website with the use of Javascript?

One thing that I find interesting is the ability to use the Apple remote with Front Row, as well as other apps on Mac that support it. I'm curious about whether Web Apps could also be made compatible through Javascript. I have a concept for a TV-like ...

I'm looking for a method in JavaScript that can search through my XML file to locate specific attributes and return the entire parent element containing that attribute. Can anyone help with

I'm completely new to XML and Javascript. I currently have this code in my HTML file: <select id="eigenschaften" name="eigenschaften" type="text" onchange=""> <option value="">Choose Property</option> <option value="soci ...