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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad