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

问题描述

(node:480) UnhandledPromiseRejectionWarning: FetchError: invalid json response body at reason: Unexpected end of JSON input （节点：480）UnhandledPromiseRejectionWarning：未处理的承诺拒绝。这个错误要么是因为在没有 catch 块的情况下抛出了异步函数，要么是因为拒绝了一个没有用 .catch() 处理过的承诺。要在未处理的承诺拒绝时终止节点进程，请使用 CLI 标志 --unhandled-rejections=strict（请参阅 https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode）。 （拒绝编号：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>
        );
    }
}

解决方法

如果您查看此内容是因为您有类似的问题。我必须做的是在 .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)**);