What is the best way to reset an imported file with each test in viTest?

I'm having trouble resetting an imported file completely after each test. I believe that using vi.mock should mimic the original contents of my imported file, but it doesn't seem to be working when I try to modify the file during the tests. Here are the relevant files:

src/
  lib/
    index.ts
    index.test.ts
// index.js
const settings = { value: '' }

export function setValue(val) {
  settings.value = val;
}

export function getValue() {
  return settings.value;
}
// index.test.js
import { setValue, getValue } from "./index.js";
import { afterEach, describe, expect, it, vi } from "vitest";

vi.mock("./index.js");

describe("setValue", () => {
    afterEach(() => {
        vi.clearAllMocks();
        vi.resetAllMocks();
    });
    it("test1", () => {
        setValue('en')
        expect(getValue()).toBe('en'); // getting undefined instead
    });
});

Answer №1

If you're searching for the function vi.resetModules(), here is an example of how it can be used:

describe('setValue', () => {
  let setValue, getValue;
  beforeEach(async () => {
    vi.resetModules();
    ({ setValue, getValue }) = await import('./index.js');
  });

  it('test1', () => {
    expect(getValue()).toBe('');
    setValue('en');
    expect(getValue()).toBe('en');
  });

  it('test2', () => {
    expect(getValue()).toBe('');
    setValue('es');
    expect(getValue()).toBe('es');
  });
});

It's important to note that top-level imports cannot be re-evaluated as mentioned in the code snippet above. This is why 'index.js' is imported using await import(...) instead of import ... from ....

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

Using TypeScript to execute a function that generates middleware for an Express application

I've developed a middleware for validating incoming data, but I encountered an issue where a function that takes a Joi object as a parameter and returns the middleware is causing errors during build. Interestingly, everything works perfectly fine duri ...

The Vue Typescript callback is automatically assigned the type "any" when not explicitly defined

Encountering a TypeScript compiler error while using an anonymous function with lodash debounce in my Vue component's watch option. The error states: "this implicitly has type any." Below is the code snippet of my component: export default defineComp ...

Is the function signature defined by this Interface syntax?

While exploring some code, I came across the following: export interface SomeInterface<T> { <R>(paths: string[]): Observable<R>; <R>(Fn: (state: T) => R): Observable<R>; } After searching through the TypeScript do ...

A guide on leveraging typeof within function parameters to ensure accurate variances

Let's create a simple class hierarchy and a list of instances. The goal is to filter items from the list of instances based on their class. There are a couple of challenges: We cannot use the typeof T syntax. How can this be written? We cannot decla ...

Why is the AngularJS 2 child @Component not being replaced in this scenario?

UPDATE: It seems that the issue lies in how I am structuring and serving the project rather than a coding problem. If I find a solution, I'll be sure to update this post. Thank you for your assistance. I'm currently developing an AngularJS 2 ap ...

Error: Unable to locate the tslint command

After attempting to utilize tslint --fix, I encountered the error message bash: tslint: command not found.... To install tslint, I ran the following command: yarn global add tslint typescript. The operating system on my machine is Centos 7. ...

Guide to Setting Up Infinite Scroll with Next JS SSG

I recently built a markdown blog using the Next Js documentation and incorporated Typescript. When trying to retrieve a list of blog posts, I utilized getStaticProps as recommended in the documentation. However, my attempts with certain npm packages were u ...

Tips for creating an onClick event for a React Component that is passed as a prop to another component

I am currently in the process of creating a custom trigger component that can be passed down to another component. My goal is to implement a click event on this trigger component from the receiving component. If you'd like to see a live example, chec ...

Function is not triggered in React component

When the LoginPage calls AuthForm, the structure is as follows: function mapDispatchToProps(dispatch: Redux.Dispatch<any>) { return { signUpWithEmail: function(email: string, password: string) { // bla bla }, }; } handleForm ...

Methods to validate CSS attributes specified within a class using React testing library

I am struggling to validate the CSS properties defined within a class in CSS using the React Testing Library. Unfortunately, I am facing challenges in doing so. Here are the simplified code snippets: import React from "react"; import { render, ...

Experimenting with axios.create() instance using jest

I have attempted multiple solutions for this task. I am trying to test an axios instance API call without using any libraries like jest-axios-mock, moaxios, or msw. I believe it is possible, as I have successfully tested simple axios calls (axios.get / axi ...

Implement new interface methods on-the-fly

I am seeking a way to dynamically incorporate methods that are defined in an interface. Initially, I considered using the index signature approach, but unfortunately, not all methods have the same signature. My objective is to preserve all type information ...

Using an object hierarchy in Typescript to create an if statement

Currently, I am attempting to create a logical statement using a hierarchy structure as shown below: if ((config.elementConfig.curve[0].dataset[0].splitBy = 'my discrete var')) {..... However, when implementing this statement, I encounter the er ...

Is there a distinction between Entity[] and array<Entity> in TypeScript?

Everything in the title, for example people: Person[]; people: Array<Person>; What sets them apart? Is there a preferred approach? Note: I couldn't find any guidance on this and I've encountered both in code. ...

The specified path is not found within the JsonFilter

Something seems off. I'm using Prisma with a MongoDB connection and attempting to search the JSON tree for specific values that match the [key, value] from the loop. However, I haven't made much progress due to an error with the path property. Be ...

Error display in Elastic Apm Rum Angular implementation

Having some issues with incorporating the @elastic/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5948598d8878098d8949b9280999487b5c7dbc4dbc4">[email protected]</a> package into my project. Angular is throwing console ...

Guide to accessing the content of pure ES6 modules directly in the Chrome console without the need for Webpack

Situation: When using tsc to compile code for es6, the scripts function properly once they are served from a server. However, I am unsure of how to access variables within modules through the console. The file names do not seem to be available as objects ...

Is it possible to eliminate a parameter when the generic type 'T' is equal to 'void'?

In the code snippet below, I am attempting to specify the type of the resolve callback. Initially: Generic Approach export interface PromiseHandler<T> { resolve: (result: T) => void // <----- My query is about this line reject: (error: a ...

Creating dynamic Angular child routes with variable initial segment

Recently, I've been working on a new project to set up a blogging system. The next step in my plan is to focus on the admin section, specifically editing posts. My idea for organizing the routes is as follows: /blog - Home page /blog/:slug - Access ...

Error encountered in Typescript function wrapper: The provided data type of number[] cannot be assigned to [number]

Within this code snippet, the function requires two arguments: one for the function that needs to be wrapped and another for the argument producer. function wrapper<K extends Array<any>, T>(fn: (...args: K) => T, pd: (...args: any) => K): ...