未处理的 Promise 拒绝警告 - React、Jest 和 Enzyme

Question

(node:480) UnhandledPromiseRejectionWarning: FetchError: invalid json response body at reason: Unexpected end of JSON input (node:480) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 10)

我的几个测试都得到了这些，但不是全部，所有测试都只是检查组件是否呈现。我到处查看并尝试实现不同的东西，但我仍然收到相同的警告。

import React from 'react';
import DirectoryArea from './directoryArea.js';
    
import { shallow } from 'enzyme';
    
it('renders without crashing', () => {
    shallow(<DirectoryArea/>);
});

所有的测试都是这样写的，只是组件不同。我怎样才能修复警告，使其不显示？我已将 CLI 标志添加到测试脚本中，但这也无济于事。

这里是目录区的代码

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    
import { api } from '../../constants';
import { request } from '../../utilities';
import { Image } from './helper.js';
    
import style from './directory.module.css';
    
export default class DirectoryArea extends Component {
    constructor(props) {
        super(props);
    
        this.state = {
            areasLoaded: false,
            error: false,
        };
    
        this.loaded = false;
        this.htmlLoaded = false;
        this.info = [];
        this.areas = {};
    }
    
    componentDidMount() {
        this.loaded = true;
        request(api(`directory/areas`), 'GET')
            .then((res) => {
                if(this.loaded) {
                    switch(res.status) {
                        case 200:
                            res.json()
                                .then((res) => {
                                    for(let i = 0; i < res.length; i++) {
                                        this.info.push(res[i]['AreaName']);
                                    }
                                    this.setState({ areasLoaded: true });
                                });
                            break;
                        default:
                            this.setState({ error: true, });
                    }
                }
            });
    }
    
    componentWillUnmount() {
        this.loaded = false;
    }
    
    generateHtml(data) {
        for(let i = 0; i < this.info.length; i++) {
            this.areas[this.info[i]] = [];
        }
    
        for(let i = 0; i < data.length; i++) {
            let singleArea = data[i]['AreaName'].split("| ");
            for(let j = 0; j < singleArea.length; j++) {
                this.areas[singleArea[j]].push(
                    <Link key={i + " " + j}
                        to={`/directory/u/${data[i]['AccountID']}`}
                        className={style.imageContainer}
                    >
                        <Image
                            photo={data[i]['Photo']}
                            photoType={data[i]['PhotoType']}
                            name={data[i]['FirstName'] + " " + data[i]['LastName']}
                        />
                    </Link>
                );
            }
        }
        this.htmlLoaded = true;
    }
    
    render() {
        if(!this.props.photosLoaded || !this.state.areasLoaded) {
            return (
                <span className={style.icon}>
                    <FontAwesomeIcon icon="spinner" pulse/>
                </span>
            );
        }
        if(this.props.photosLoaded && this.state.areasLoaded && !this.htmlLoaded) {
            this.generateHtml(this.props.data);
        }
        return(
            <div>
                {Object.entries(this.areas).map(([key, value]) => {
                    return(
                        <div key={key} className={style.photo}>
                            <h5 className={style.header}>{key}</h5>
                            {value}
                        </div>
                    );
                 })}
            </div>
        );
    }
}

Answer 1

如果您正在查看这篇文章是因为您遇到了类似的问题。我要做的是在 .then{} 块之后添加 ,err => console.log(err) ，如果有任何错误，它会输出到控制台。

例如

case 200:
                        res.json()
                            .then((res) => {
                                for(let i = 0; i < res.length; i++) {
                                    this.info.push(res[i]['AreaName']);
                                }
                                this.setState({ areasLoaded: true });
                            }**,err => console.log(err)**);

未处理的 Promise 拒绝警告 - React、Jest 和 Enzyme

Unhandled Promise Rejection Warning- React, Jest, and Enzyme

reactjs

jestjs

enzyme

babel-jest