在 JEST-Enzyme 中编写测试用例以在构造函数中调用 promise

Question

我需要为具有在构造函数中调用的承诺的 React 类组件编写渲染测试用例。

React 类组件的构造函数：

constructor(props) {

    super(props);

    this.props.getPaypalAuthUrl().then((result) => {

        this.setState({authUrl: result})

    });

}

我的测试用例：

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);

    });

错误获取：

TypeError: this.props.getPaypalAuthUrl(...).then 不是函数

我尝试过的解决方案：我尝试使用 async-await 编写我的测试用例，并尝试获取构造函数的实例，就像我们为生命周期或普通方法获取的一样。

Answer 1

副作用是否在构造函数中正确完成。这是您案例的单元测试解决方案：index.jsx：import React, { Component } from 'react';class SomeCompoennt extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = { authUrl: '' };&nbsp; &nbsp; this.props.getPaypalAuthUrl().then((result) => {&nbsp; &nbsp; &nbsp; this.setState({ authUrl: result });&nbsp; &nbsp; });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return <div>some component</div>;&nbsp; }}export default SomeCompoennt;index.spec.jsx：import SomeCompoennt from './index';import React from 'react';import { shallow } from 'enzyme';describe('58877501', () => {&nbsp; it('should pass', async () => {&nbsp; &nbsp; const mProps = {&nbsp; &nbsp; &nbsp; getPaypalAuthUrl: jest.fn().mockResolvedValueOnce('http://github.com'),&nbsp; &nbsp; };&nbsp; &nbsp; const wrapper = shallow(<SomeCompoennt {...mProps}></SomeCompoennt>);&nbsp; &nbsp; expect(wrapper.text()).toBe('some component');&nbsp; &nbsp; expect(wrapper.state()).toEqual({ authUrl: '' });&nbsp; &nbsp; await new Promise((resolve) => setTimeout(resolve));&nbsp; &nbsp; expect(wrapper.state()).toEqual({ authUrl: 'http://github.com' });&nbsp; });});100% 覆盖率的单元测试结果：&nbsp;PASS&nbsp; src/stackoverflow/58877501/index.spec.tsx (10.985s)&nbsp; 58877501&nbsp; &nbsp; ✓ should pass (24ms)-----------|----------|----------|----------|----------|-------------------|File&nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; % Stmts | % Branch |&nbsp; % Funcs |&nbsp; % Lines | Uncovered Line #s |-----------|----------|----------|----------|----------|-------------------|All files&nbsp; |&nbsp; &nbsp; &nbsp; 100 |&nbsp; &nbsp; &nbsp; 100 |&nbsp; &nbsp; &nbsp; 100 |&nbsp; &nbsp; &nbsp; 100 |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp;index.jsx |&nbsp; &nbsp; &nbsp; 100 |&nbsp; &nbsp; &nbsp; 100 |&nbsp; &nbsp; &nbsp; 100 |&nbsp; &nbsp; &nbsp; 100 |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|-----------|----------|----------|----------|----------|-------------------|Test Suites: 1 passed, 1 totalTests:&nbsp; &nbsp; &nbsp; &nbsp;1 passed, 1 totalSnapshots:&nbsp; &nbsp;0 totalTime:&nbsp; &nbsp; &nbsp; &nbsp; 12.808s源代码：https : //github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58877501