Jest - handling base class functions while unit testing

Question

The code looks like this.

class First extends TelemetryFramework<FirstProps, FirstStates>{
   public getData(){
     const data = this.getconfidentialData()
     this.telemetryInfo("data fetched..")
}
}

When I try to write the unit tests for the function, it fails with the error "TypeError: Cannot read property 'telemetryInfo' of undefined". TelemetryFramework class extends React.Component class and adds methods for handling telemetry. Can you please help me find out a way to mock the TelemetryFramework class or its methods? Or is there any other work around.

This is how the unit test looks like.

describe('Test for First', function() {
  test('getData test', async function() {
    const component = shallow(<First {...props} {...state} />);
    const comp = component.instance();
    comp.getData();
  });
});

Do you mind sharing your unit test as well so we can see what might be going wrong? — etarhan
– etarhan, Commented Sep 22, 2019 at 18:08

Lin Du · Accepted Answer · 2019-09-28 12:56:56Z

Here is the solution, you can use jest.spyOn to mock getconfidentialData and telemetryInfo methods of First.prototype

TelemetryFramework.tsx:

import React, { Component } from 'react';

class TelemetryFramework extends Component {
  public render() {
    return <div>TelemetryFramework</div>;
  }
  protected telemetryInfo(...args: any[]) {
    //
  }
  protected getconfidentialData() {
    //
  }
}

export default TelemetryFramework;

First.tsx:

import React from 'react';
import TelemetryFramework from './TelemetryFramework';

class First extends TelemetryFramework {
  constructor(props) {
    super(props);
  }
  public getData() {
    const data = this.getconfidentialData();
    this.telemetryInfo('data fetched..');
  }
  public render() {
    return <div>First</div>;
  }
}

export default First;

First.spec.tsx:

import React from 'react';
import First from './First';
import { shallow } from 'enzyme';

describe('Test for First', () => {
  const props = {};
  const state = {};
  afterEach(() => {
    jest.restoreAllMocks();
  });
  test('getData test', () => {
    const getconfidentialDataSpy = jest.spyOn(First.prototype as any, 'getconfidentialData');
    const telemetryInfoSpy = jest.spyOn(First.prototype as any, 'telemetryInfo');
    const component = shallow(<First {...props} {...state} />);
    expect(component.text()).toBe('First');
    const comp = component.instance() as any;
    comp.getData();
    expect(getconfidentialDataSpy).toBeCalledTimes(1);
    expect(telemetryInfoSpy).toBeCalledTimes(1);
  });
});

Unit test result with coverage report:

 PASS  src/stackoverflow/58049595/First.spec.tsx (14.52s)
  Test for First
    ✓ getData test (10ms)

------------------------|----------|----------|----------|----------|-------------------|
File                    |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------------------|----------|----------|----------|----------|-------------------|
All files               |    95.45 |       50 |     87.5 |    94.74 |                   |
 First.tsx              |      100 |       50 |      100 |      100 |                 6 |
 TelemetryFramework.tsx |       90 |      100 |       75 |     87.5 |                 5 |
------------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        19.096s, estimated 25s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58049595

Collectives™ on Stack Overflow

Jest - handling base class functions while unit testing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related