Javascript 使用Jest测试类组件firebase操作

我是jest的初学者，我尝试用jest测试firebase插件。如果我有一个名为

Orders

的类组件，并将firebase操作方法连接为名为

fetchOrders

的道具。 这是我的设置

OrderAction.js

import { app } from "firebase";
import {
 DATABASE_COLLECTION_ORDERS,
} from "../../config";

export const fetchOrders = () => async (dispatch) =>
{
 const objList = [];

 app().firestore().collection(DATABASE_COLLECTION_ORDERS).get()
     .then((snapShot) =>
     {
         snapShot.forEach((doc) =>
         {
             if (doc.exists)
             {
                 // get the collection primary id
                 const { id } = doc;
                 // read the data
                 const data = doc.data();

                 objList.push({ ...data, id });
             }
         });

         dispatch({
             type    : ORDER_APPEND,
             payload : objList,
         });
     })
     .catch((err) =>
     {
         reportError(err);
     });
};

Orders.js

import React from "react";
import { fetchOrders, fetchOrderItems } from "../../redux/action/OrderAction";

class Orders extends React.Component{
   async componentDidMount()
   {
      this.props.fetchOrders();
   }
   render()
   {
       return (
            ...content
       )
   }
}

const mapStateToProps = (state) => ({
   orders   : state.orders,
});

export default connect(mapStateToProps,
{ 
    fetchOrders,
})(Orders);

Orders.test.js

 import React from 'react';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { Provider } from 'react-redux';
 import configEnzyme from "../setupTest";
 import store from "../redux/store";
 import Orders from "../views/basic/Orders";

 describe('Test case for testing orders', () =>
 {
     // configure the jtest
     configure({ adapter: new Adapter() });

     // mount login component to the wrapper
     let wrapper;

     const originalWarn = console.warn;

     // console.warn = jest.fn();

     // disable the console warnings
     beforeEach(() =>
     {
         // jest.spyOn(console, 'warn').mockImplementation(() => {});
         // jest.spyOn(console, 'error').mockImplementation(() => {});

         wrapper = mount(
             <Provider store={store}>
                 <Orders />
             </Provider>,
         );
     });

     // test case fetching data
     it('check input data', () =>
     {
         const componentInstance = wrapper.find('Orders').instance();

         componentInstance.props.fetchOrders();

         // wait for 2 seconds for redux store update
         jest.useFakeTimers();
         setTimeout(() =>
         {
            wrapper.update();

            expect(componentInstance.props.orderHeader).not.toBeNull();
         }, 2000);
     });
 });

从“React”导入React；
从“酶”导入{configure，mount}；
从'enzyme-Adapter-react-16'导入适配器；
从'react redux'导入{Provider}；
从“./setupTest”导入配置酶；
从“./redux/store”导入存储；
从“./views/basic/Orders”导入订单；
描述（'测试订单的测试用例'，（）=>
{
//配置jtest
配置（{adapter:newadapter（）}）；
//将登录组件装载到包装器
让包装纸；
const originalWarn=console.warn；
//console.warn=jest.fn（）；
//禁用控制台警告
在每个之前（（）=>
{
//jest.spyOn（控制台，'warn'）.mockImplementation（（）=>{}）；
//spyOn（控制台，'error'）.mockImplementation（（）=>{}）；
包装=装载(
,
);
});
//测试用例获取数据
它（'检查输入数据'，（）=>
{
const componentInstance=wrapper.find（'Orders'）.instance（）；
componentInstance.props.fetchOrders（）；
//等待2秒钟以更新redux存储
开玩笑。使用faketimers（）；
设置超时（（）=>
{
wrapper.update（）；
expect（componentInstance.props.orderHeader）.not.toBeNull（）；
}, 2000);
});
});

然后我运行测试用例，结果如下

（节点：24100）未处理的PromisejectionWarning:FirebaseError: Firebase:尚未创建Firebase应用程序“[默认]”-请致电Firebase App.initializeApp（）（应用/无应用）。（节点：24100） 未处理的PromisejectionWarning:未处理的承诺拒绝。这 错误源于异步函数的内部抛出 没有拦截，或拒绝未处理的承诺 with.catch（）。终止未处理承诺上的节点进程 拒绝，请使用CLI标志

--未处理的拒绝=严格（请参阅
).
（拒绝id:1）（节点：24100）[DEP0018]拒绝警告：未处理
拒绝承诺是不推荐的。在未来，承诺拒绝
未处理的将使用
非零退出代码。（节点：24100）未处理的PromisejectionWarning：
Firebase错误：Firebase:未创建Firebase应用程序“[默认]”


调用Firebase App.initializeApp（）（应用程序/无应用程序）。（节点：24100）未处理的PromisejectionWarning:未处理的承诺拒绝。这
错误源于异步函数的内部抛出
没有拦截，或拒绝未处理的承诺
with.catch（）。终止未处理承诺上的节点进程
拒绝，请使用CLI标志
--未处理的拒绝=严格（请参阅
).
（拒绝id:3）（节点：24100）未处理的Promisejection警告：
Firebase错误：Firebase:未创建Firebase应用程序“[默认]”

调用Firebase App.initializeApp（）（应用程序/无应用程序）。（节点：24100）未处理的PromisejectionWarning:未处理的承诺拒绝。这
错误源于异步函数的内部抛出
没有拦截，或拒绝未处理的承诺
with.catch（）。终止未处理承诺上的节点进程
拒绝，请使用CLI标志
--未处理的拒绝=严格（请参阅
).
（拒绝id:4）通过src/test/Orders.test.js（8.099s）


有没有办法解决这个问题？
这是因为在您的测试环境中，您没有启动firebase应用程序（使用
initializeApp
），而且您可能不应该这样做（您不希望每次运行测试时都与firebase通信，尤其是单元测试）。
这类问题也适用于其他外部服务，如您自己的服务器和外部API

那么你如何测试你的应用呢？

答案是模仿——为测试环境提供这些服务的替代实现。有一些嘲弄，这取决于你想嘲弄什么以及如何嘲弄。此外，有时，这些工具提供自己的测试工具包（同样，它为它公开的方法提供了一个可测试的实现）

在这种情况下，您可以使用
jest
mocking mechanizm来模拟来自firebase的响应，这样您的应用程序“不知道”它从其他资源接收到了数据，并将按照它应该的方式运行

相关的jest方法是
spyOn
和
mockImplementation
，下面是一个示例（我简化了您的组件）：

App.spec.js

测试（“装载”，异步（）=>{
const fetchPromise=Promise.resolve（[{name:“order1”}]）；
jest.spyOn（firebase，“应用”）.mockImplementation（（）=>({
firestore:（）=>({
收藏：（）=>({
获取：（）=>获取承诺
})
})
}));
让wrapper=mount（（点击测试选项卡）
很高兴听到：）祝你好运！