Ad

Write Test-case In JEST-Enzyme For Promise Calling In Constructor

I need to write the rendering test-case for a React class component which is having the promise which is getting called in constructor function.

Constructor function of React class component :

constructor(props) {
    super(props);
    this.props.getPaypalAuthUrl().then((result) => {
        this.setState({authUrl: result})
    });
}

My Test case :

test(testIDAndStatement.settings.TC086, async () => {
        const wrapper = await shallow(<Payment getPaypalAuthUrl={getPaypalAuthUrl}/>);
        const instance = wrapper.instance();
        instance.constructor();
        wrapper.setState({ connectedToPaypal: true });
        const paymentComponent = wrapper.find('.settings-payment__wrapper');
        expect(paymentComponent.length).toBe(1);
    });

Error getting :

TypeError: this.props.getPaypalAuthUrl(...).then is not a function

Solutions I have tried: I have tried to write my test case with async-await and tried to get the instance of constructor like we get for the life cycle or normal methods.

Ad

Answer

Whether or not the side effects are done correctly in the constructor. Here is the unit test solution for your case:

index.jsx:

import React, { Component } from 'react';

class SomeCompoennt extends Component {
  constructor(props) {
    super(props);
    this.state = { authUrl: '' };
    this.props.getPaypalAuthUrl().then((result) => {
      this.setState({ authUrl: result });
    });
  }
  render() {
    return <div>some component</div>;
  }
}

export default SomeCompoennt;

index.spec.jsx:

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

describe('58877501', () => {
  it('should pass', async () => {
    const mProps = {
      getPaypalAuthUrl: jest.fn().mockResolvedValueOnce('http://github.com'),
    };
    const wrapper = shallow(<SomeCompoennt {...mProps}></SomeCompoennt>);
    expect(wrapper.text()).toBe('some component');
    expect(wrapper.state()).toEqual({ authUrl: '' });
    await new Promise((resolve) => setTimeout(resolve));
    expect(wrapper.state()).toEqual({ authUrl: 'http://github.com' });
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/58877501/index.spec.tsx (10.985s)
  58877501
    ✓ should pass (24ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.jsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.808s

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

Ad
source: stackoverflow.com
Ad