时间戳

首页 > 解决方案 > Promise 不适用于 REACTJS 中的玩笑

reactjs - Promise 不适用于 REACTJS 中的玩笑

问题描述

TypeError: Network request failed当我尝试测试组件的快照时，我一直有

这是组件

import {GetAllUsersPost} from './postdata';

    class ManageUsers extends React.Component{

        render(){
            return(
                    {...}
            );
        }

componentDidMount(){
            GetAllUsersPost(UserProfile.getId()).then((result) => {
                this.setState({
                    parsed:result,
                    loading:false
                })
            });
        }
    }

这是邮政数据

export function GetAllUsersPost(id) {
  const json = JSON.stringify({id: id})
  return new Promise((resolve, reject) => {
    fetch(BaseURL + 'allusers', BdRequest(json)).then((response) => response.json()).then((res) => {
      resolve(res);
    }).catch((error) => {
      reject(error);
    });
  });
}

这是测试文件 (\src__tests__\ManageUsers.test.jsx)

import React from 'react';
import ManageUsers from '../component/ManageUsers';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme, {shallow,mount} from 'enzyme';
Enzyme.configure({adapter:new Adapter()});

  describe("ManageUsers", ()=>{
        const wrapper = shallow(<ManageUsers/>);
        const instance = wrapper.instance();
    let response;

    test("loading()",()=>{
        wrapper.setState({loading:false})
        response = JSON.stringify("")
        expect(JSON.stringify(instance.loading())).toBe(response);
    })
});

我知道我的错误是由于承诺（当 Enzyme 试图浅化组件时），但我无法让它工作......

谢谢

标签： reactjsjestjsenzyme

解决方案

您的测试必须设置为异步测试。例如

it('should do something', async () => {
  const result = await myAsyncMethod();
});

为清楚起见进行了编辑-请注意，这显然是未经测试的，但是您需要从渲染方法和状态中寻找一些东西，因为这就是您对结果所做的一切。

import React from 'react';
import ManageUsers from '../component/ManageUsers';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme, {shallow,mount} from 'enzyme';
Enzyme.configure({adapter:new Adapter()});

describe("ManageUsers", () => {
  const wrapper = shallow(<ManageUsers/>);

  test("loading()", async () => {
    // wrapper.setState({loading:false}) // This should be a default
    expect(wrapper.find('something from the render'));
    expect(wrapper.state.parsedResults).toEqual('some result')
  });
});

推荐阅读