Related questions

Mocking classes in Jest does not call the same method

2021-01-15 19:58 clueless imported from Stackoverflow

I'm trying to mock a class that is being imported into my code with require and then testing if a method of that class is getting called.

I've created a sample setup where this issue can be replicated:

// user.js
class User {
  getName() {
    return "Han Solo"
  }
}

module.exports = User

// user-consumer.js
const User = require('./user')
const user = new User()

module.exports.getUserName = () => {
  // do things here
  return user.getName() 
}

// user.test.js
const userConsumer = require('./user-consumer')
const User = require('./user')
jest.mock('./user')

it('should mock', () => {
  const user = new User()
  jest.spyOn(user, 'getName')
  userConsumer.getUserName()
  expect(user.getName).toBeCalled()
})

The error I get is as follows:

failed test

If I used ES6 syntax this would work as shown on jest's documentation: https://jestjs.io/docs/en/es6-class-mocks

But I unfortunately can't use ES6 on this project as it would require a lot of refactoring.

I also tried mocking the class with the module factory parameter

jest.mock('./user', () => {
  return jest.fn(() => {
    return {
      getName: jest.fn(),
    }
  })
})

It still doesn't work. When I log console.log(user.getName) in user-consumer.js:5 it does show that the method has been mocked but whatever is called in user.getName() is not the consumer function still returns "Han Solo".

I've also tried it with and without jest.spyOn and it still returns the same error.

Is this just not possible with none ES6 syntax?

1 answer

  • answered 2021-01-15 20:55 Estus Flask

    The problem is that Jest spies have undocumented behaviour.

    Even if prototype method is the same for all instances:

    new User().getName === new User().getName

    A spy is specific to an instance:

    jest.spyOn(new User(), 'getName') !== jest.spyOn(new User(), 'getName')

    If a specific instance is unreachable, it's a prototype that needs to be spied:

    jest.spyOn(User.prototype, 'getName')
userConsumer.getUserName()
expect(User.prototype.getName).toBeCalled();

    A problem with jest.mock isn't specific to ES6 syntax. In order for a spy to be available for assertions and implementation changes, it should be exposed somewhere. Declaring it outside jest.mock factory is not a good solution as it can often result in race condition described in the manual; there will be one in this case too. A more safe approach is to expose a reference as a part of module mock.

    It would be more straightforward for ES module because this way class export is kept separately:

    import MockedUser, { mockGetName } from './user';

jest.mock('./user', () => {
  const mockGetName = jest.fn();
  return {
    __esModule: true,
    mockGetName,
    default: jest.fn(() => {
      return {
        getName: mockGetName
      }
    })
  }
})
...

    For CommonJS module with class (function) export, it will be efficiently exposed as class static method:

    import MockedUser from './user';

jest.mock('./user', () => {
  const mockGetName = jest.fn();
  return Object.assign(
    jest.fn(() => {
      return {
        getName: mockGetName
      }
    }),
    { mockGetName }
  })
})
...
MockedUser.mockGetName.mockImplementation(...);
userConsumer.getUserName()
expect(MockedUser.mockGetName).toBeCalled();

See also questions close to this topic

  • how to avoid insert duplicate record in node, sqlite [knex, objectionJS]

    I'm pulling data from api and storing into database, here is the values i fetched from api:

    const optAdThisMonthsResult =  [
            [ 'google.com', 'Display', '2021-02-01', 3, 48, 76 ],
            [ 'google.com', 'a1.php', '2021-02-01', 94, 31, 42 ],
        ]

    After fetching I'm storing it in my database:

    for (const data of optAdThisMonthsResult) {

        //1. Assign values to store
        let rowData = {
            url: data[0],
            tags: data[1],
            date: data[2],
            value1: data[3],
            value2:data[4],
            value3: data[5],
        };

        //2. Store to database
        let ret = await OptAd.query().insert(rowData);
        console.log(
            `Inserted OptAd data with return code: ${require("util").inspect(ret)}`
        );
    }

    Every time I run this script it also stores the values which are already present in the database, how can i build a test for this if the data is already present don't insert and only update this value1 value2 value3

  • Can't figure out why I am getting this error in my terminal while creating a webpage with the help of API

    This is my javascript code . while I am running it using nodemon I am getting error in my terminal . The error is mentioned at the bottom of the code

    const express=require("express");
const bodypraser=require("body-parser");
const request =require("request");
const https=require("https");


const app=express();
app.use(express.static("public"));
app.use(bodypraser.urlencoded({extended:true}))

    posting from route

     app.post("/",function(req,res)
{
const firstname=req.body.fname;
 const lastname=req.body.lname;
const email=req.body.email;
const data={
members:[
{
email_address:email,
status:"Suscribed",
merge_fields:{
  FNAME:firstname,
  LNAME:lastname
  }
}
]};

const jsondata=JSON.stringify(data);
const url= "https://us1.api.mailchimp.com/3.0/lists/a6b99f4c3c?fields= 
<SOME_ARRAY_VALUE>&exclude_fields=<SOME_ARRAY_VALUE>";

const options={
method:"POST",
auth:"deco:d6550609e1d79db44b409d81841d74bf-us1"
 }
const request=https.request(url,options,function(response){
 response.on("data",function(data){
console.log(JSON.parse(data));
})
 })

request.write(jsondata);
request.end();

});

app.get("/" ,function(req ,res){
res.sendFile(__dirname+"/signup.html");
});
app.listen(3000,function(req,res){
console.log("ok ");
});

    End of code

    This is the error which I am facing in my terminal

  • Convert Array to Object in Node Js

    May I convert this Array:

    ['first,1','second,information']

    into this:

    {
  [
  first: 1,
  second: 'infromation'
  ]
}

    is there the best way to do that?

  • Force Angular app to redirect when session expired

    I have an Angular app which requires session authorization from an OIDC service. With the normal/happy path, a separate NodeJS/Express app checks for session authorization and redirects to the OIDC authorization/authentication service and attaches the relevant headers. If everything passes, the middleware routes to the Angular app.

    At a point though, the Angular app runs with a token that is expired. The Angular app gets the username and at that point I could check for expiration. However, if it is expired, I need the Angular way to react to the error condition by re-routing the whole Angular app to the relevant middleware page. Because the indicator will go to a component nested within the app, I don't know how to get the little component to redirect the bigger/encompassing app.

    I'm not an Angular person, so I don't even know what part of Angular to look up. Because of my lack of knowledge, I'm including source files that might or might not be relevant.

    header.component.ts is where it gets the username and could return a bad token indicator

    import { Component, OnInit } from '@angular/core';
import { ProfileService } from '../../../core/services/profile.service';

@Component({
  selector: 'header-comp',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  userName: string = 'No Session';

  constructor(private profileService: ProfileService) { }

  ngOnInit() {
    this.onDisplayUserLogged();
  }

  onDisplayUserLogged() {
    this.profileService.getUsername().subscribe(data => {
      this.userName = 'Welcome: ' + data;
    });
  }
}

    app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_BASE_HREF } from '@angular/common';
import { Router } from '@angular/router';

//Services
import { ProfileService } from './core/services/profile.service';
import { FinanceService } from './core/services/finance.service';
import { CmasService } from './core/services/cmas.service';
import { SoftlayerService } from './core/services/softlayer.service';
import { DashboardService } from './core/services/dashboard.service';
import { LowDollarExceptionService } from './core/services/lowDollarException.service';

//Components
import { AppComponent } from './app.component';
import { CmasComponent } from './modules/cmas/cmas.component';
import { SoftlayerComponent } from './modules/softlayer/softlayer.component';
import { FinanceComponent } from './modules/finance/finance.component';
import { ErrorComponent } from './modules/error/error/error.component';
import { LowDollarExceptionComponent } from './modules/lowDollarException/lowDollarException.component'
import { MenuComponent } from './shared/layout/menu/menu.component';
import { BasicComponent } from './shared/modals/basic/basic.component';
import { HeaderComponent } from './shared/layout/header/header.component';
import { PreProcessedPipe } from './shared/components/file-listing/file-listing.component';
import { ProcessedPipe } from './shared/components/softlayer-file-list/softlayer-file-list.component';

//Routing
import { AppRoutingModule } from './app-routing.module';

//Libs
import { AuthInterceptor } from 'auth-lib';
import { TermsComponent } from './modules/terms/terms.component';
import { FileListingComponent } from './shared/components/file-listing/file-listing.component';
import { ConfirmCancelComponent } from './shared/modals/confirm-cancel/confirm-cancel.component';
import { ErrorDisplayComponent } from './shared/components/error-display/error-display.component';
import { AboutComponent } from './modules/about/about.component';
import { ResultsComponent } from './modules/cmas/results/results.component';
import { SoftlayerFileListComponent } from './shared/components/softlayer-file-list/softlayer-file-list.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { ReviewResultsComponent } from './modules/softlayer/review-results/review-results.component';
import { InvoiceDetailsComponent } from './modules/dashboard/invoice-details/invoice-details.component';
import { FormsModule } from '@angular/forms';
import { LowDollarNewRecordComponent } from './modules/lowDollarException/lowDollarNewRecord.component';

@NgModule({
  declarations: [
    AppComponent,
    CmasComponent,
    FinanceComponent,
    ErrorComponent,
    MenuComponent,
    BasicComponent,
    HeaderComponent,
    TermsComponent,
    FileListingComponent,
    PreProcessedPipe,
    ProcessedPipe,
    ConfirmCancelComponent,
    ErrorDisplayComponent,
    AboutComponent,
    ResultsComponent,
    SoftlayerComponent,
    SoftlayerFileListComponent,
    DashboardComponent,
    ReviewResultsComponent,
    InvoiceDetailsComponent,
    LowDollarExceptionComponent,
    LowDollarNewRecordComponent
  ],
  imports: [BrowserModule, HttpClientModule, AppRoutingModule, FormsModule],
  providers: [
    ProfileService,
    FinanceService,
    CmasService,
    SoftlayerService,
    DashboardService,
    LowDollarExceptionService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      deps: [Router],
      multi: true,
    },
    { provide: APP_BASE_HREF, useValue: '/sprint-cost-recovery' },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

    app.component.ts

    import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import listadeTerms from '../assets/config/properties.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    this.openOverlay();
  }

  openOverlay() {
    var sheet = document.createElement('style');
    sheet.innerHTML =
      '.ds-full-width {visibility: hidden;} .usabilla_live_button_container{visibility: hidden;}';
    document.body.appendChild(sheet);
    if (document.getElementById('termsDialog')) {
      var overlayElement = document.querySelector('#termsDialog');
      overlayElement.classList.add('ds-open');
      document
        .querySelector('#termsDialogCloseBtn')
        .addEventListener('click', load);
    }
    function load() {
      var div = document.getElementById('termsDialog');
      sheet.innerHTML = '.usabilla_live_button_container{visibility: true;}';
      var parent = div.parentElement;
      parent.removeChild(div);
      var node = sheet.parentNode;
      node.removeChild(sheet);
    }
  }
}

    app-routing.module.ts

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// Components
import { CmasComponent } from './modules/cmas/cmas.component';
import { FinanceComponent } from './modules/finance/finance.component';
import { ErrorComponent } from './modules/error/error/error.component';
import { AboutComponent } from './modules/about/about.component';
import { SoftlayerComponent } from './modules/softlayer/softlayer.component';
import { DashboardComponent } from './modules/dashboard/dashboard.component';
import { LowDollarExceptionComponent } from './modules/lowDollarException/lowDollarException.component';
import { LowDollarNewRecordComponent } from './modules/lowDollarException/lowDollarNewRecord.component';

const appRoutes: Routes = [
  { path: 'finance', component: FinanceComponent },
  { path: 'cmas-process', component: CmasComponent },
  { path: 'about', component: AboutComponent },
  { path: 'softlayer-process', component: SoftlayerComponent },
  { path: 'cost-dashboard', component: DashboardComponent },
  { path: 'low-dollar', component: LowDollarExceptionComponent },
  { path: 'low-dollar/create', component: LowDollarNewRecordComponent },
  { path: 'error/auth', component: ErrorComponent, data: { forbidden: true } },
  { path: '', redirectTo: '/finance', pathMatch: 'full' },
  {
    path: 'error/badgateway',
    component: ErrorComponent,
    data: { badgateway: true },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
  • How to install a mock library into a unit test in Angular? I want to install sinon-chrome into a spectator test

    I am working on a Google Chrome extension which is written in angular and I need to write unit tests for components that make use of the Chrome API. I found a library that I believe will do the job.

    https://www.npmjs.com/package/sinon-chrome

    However, I do not have enough experience with Angular to know how exactly to put the library into use. The usage section says that I need to require the value in a constant, but I have no idea how or where that would go. Does that go in the unit test? Does that go in the karma file? What is the global.chrome that is found in the examples.

    The code for my unit test. It otherwise runs fine except for this chrome mock issue.

    const angularFireAuthMock = {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onAuthStateChanged: () => {},
};
 
describe('AppComponent', () => {
    let spectator: Spectator<AppComponent>;
    const createComponent = createComponentFactory({ component: AppComponent, mocks: [FirestoreService], providers: [{
        provide: AngularFireAuth, useValue: angularFireAuthMock,
    }] });
 
    beforeEach(() => {
        spectator = createComponent();
    });
 
    it('should create the app', () => {
        expect(spectator.component).toBeDefined();
    });
});

    AppComponent is where the Chrome

    Thanks for your help.

  • How to write test for component containing ThemeProvider as a wrapper to its child components in react native

    Following is the basic functional component that is wrapped around by ThemeProvider provided by react-native-elements

    const Page = ({route, navigation}: Props) => {

    // some states and functions
    return(
       <View>
           <ThemeProvider
             theme={
              //some code here
              }>
                <View>
                    //some component here
                </View>
           </ThemeProvider>
       </View>
    )
}

    I am trying to write a snapshot tests for Page component as below :

    const tree = renderer.create(<Page/>);
expect(tree.toJSON()).toMatchSnapshot();

    But i am getting following error :

    console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10695 The above error occurred in the component: in Page

    I have tried testing component by wrapping Page itself as below :

    const tree = renderer.create(
    <ThemeProvider
       <Page/>
    </ThemeProvider>);
expect(tree.toJSON()).toMatchSnapshot();

    But this does not solved the issue. I am not able to find a way to mock a component that itself contains ThemeProvider. If i remove ThemeProvider from the component test passes like charm.

    Any helps would be appreciated. Thanks.

  • How to Unit test Spring-Boot Application main() method to get Jacoco test coverage

    How to Unit test Spring-Boot Application main() method with SpringApplication.run() . I am wondering if it is possible to get Jacoco test coverage on this class. (Otherwise I will exclude it)

    This question is similar, but not the same, as this question: Spring Boot, test main application class

    I am using mockito-core 3.8 and mockito-inline.

    This test code works for me but Jacoco does not pick it up as test coverage:

    @SpringBootTest
@ActiveProfiles("test")
public class AutowireTest {

    private static final String ARG = "";
    private static final String[] ARGS = new String[]{ARG};

    @Autowired
    ConfigurableApplicationContext context;

    @Test
    public void main() {
        try (MockedStatic<Application> appStatic = Mockito.mockStatic(Application.class);
             MockedStatic<SpringApplication> springStatic = Mockito.mockStatic(
               SpringApplication.class)) {
            appStatic.when(() -> Application.main(ARGS))
                .thenCallRealMethod();
            springStatic.when(() -> SpringApplication.run(Application.class, ARGS))
                .thenReturn(context);

            // when
            Application.main(ARGS);

            //then
            appStatic.verify(times(1),
                () -> Application.main(ARGS));
            springStatic.verify(times(1),
                () -> SpringApplication.run(Application.class, ARGS));
        }
    }
}

    Is Jacoco not able to show coverage on static methods?

  • More than one test fails due to import after jest is torn down - Supertest Typescript and Express API

    I am running into an issue where I am running multiple tests using supertest and jest. When there is only one test running then it works just fine but the second one throws the following error:

    ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

    I tested this with two very simple tests:

    describe("Default API", () => {
    describe("Default:", () => {
        it("should create a user in the DB", (done) => {
            request(app).get("/").expect(200, done);
        });
        it("should create a user in the DB", (done) => {
            request(app).get("/").expect(200, done);
        });
    });
});

    They are the same but the second one throws the error. If I run only the first one there is no issue. This must be a setup issue Does anyone have advice. In my index.ts where I have the main express code I export app as follows:

    export default app;

    This is at the bottom of the index.ts file.

  • TypeError: Cannot read property 'getContext' of null

    I have created a game using canvas API and now I am testing using Jest. But when running a test for a simple function it throws me this error. my script tag is at the end of the HTML and I also added this event listener to wait for the DOM document.addEventListener("DOMContentLoaded", init,false);

    jest

    PASS tests/sum.test.js FAIL tests/mod.test.js ● Test suite failed to run

    TypeError: Cannot read property 'getContext' of null

  20 |   const empty = 0;
  21 |   const nextPieceCanvas = document.querySelector("canvas#nextPiece") as HTMLCanvasElement;
> 22 |   const NPctx = nextPieceCanvas.getContext("2d")! as CanvasRenderingContext2D;
     |                               ^
  23 |   
  24 |   //Gameboard Canvas
  25 |   const canvas = document.querySelector("canvas#tetris") as HTMLCanvasElement;

  at Object.<anonymous> (src/ts/app.ts:22:31)
  at Object.<anonymous> (tests/mod.test.js:2:1)

    Test Suites: 1 failed, 1 passed, 2 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.424 s Ran all test suites. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! tetris_ts@1.0.0 test: jest npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the tetris_ts@1.0.0 test script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! /home/alex/.npm/_logs/2021-02-26T22_46_02_771Z-debug.logenter code here

  • nestjs unit test createTestingModule Dependency Injection

    I hope you can help me out. I am using Nx with latest angular/nestjs (date: February, 26)

        ...
    "@nestjs/common": "^7.0.0",
    "@nestjs/config": "^0.6.3",
    "@nestjs/core": "^7.0.0",
    "@nestjs/platform-express": "^7.0.0",
    "@nestjs/platform-socket.io": "^7.6.7",
    "@nestjs/websockets": "^7.6.7",
    "jest": "26.2.2",
    "@nrwl/jest": "11.4.0",
    ...

    I cannot get my unit test running using NestJS with Jest I want to test following service:

    @Injectable()
export class CoreApiService {
  logger = new Logger('CoreApiService');
  apiEndpoint;

  constructor(private httpService: HttpService, configService: ConfigService) {
    this.apiEndpoint = configService.get('API_SERVICE_ENDPOINT');
  }
}

    and I get following error:

    TypeError: Cannot read property 'get' of undefined

    so it seems that the ConfigService (and also httpService) is always undefined.

    when logging httpService and ConfigService, it will always be undefined. Even when I try to instantiate new Instances like new CoreApiService(new HttpService(), new ConfigService()) I've even tried things like new CoreApiService({} as any, {get: (...params} => {return 'foo'}) in the test itself

    it will always be the same error mentioned above.

    The test file:

    import { Test, TestingModule } from '@nestjs/testing';
import { CoreApiService } from './core-api.service';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { HttpModule } from '@nestjs/common';


class ConfigServiceMock {
  get(key: string): string {
    switch (key) {
      case 'API_SERVICE_ENDPOINT':
        return '';
    }
  }
}

describe('CoreApiService', () => {
  let module: TestingModule;
  let service: CoreApiService;

  beforeEach(async () => {
    module = await Test.createTestingModule({
      imports: [HttpModule, ConfigModule],
      providers: [
        CoreApiService,
        { provide: ConfigService, useClass: ConfigServiceMock },
      ],
    }).compile();
    service = module.get<CoreApiService>(CoreApiService);
  });

  it('should be defined', () => {
    expect(service).toBeDefined();
  });
});

    I've even tried: .overrideProvider(ConfigService).useClass(ConfigServiceMock)

    Thank you in advance!