使用 Jest 测试类组件 firebase 操作

Question

我是玩笑的初学者，我尝试用玩笑测试 firebase 插件。如果我有一个名为的类组件Orders并将 firebase 操作方法连接为一个名为fetchOrders. 这是我的设置，

1. 订单操作.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);
        });
   };
   

2. 订单.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);
   

3. 订单.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);
        });
    });
   

然后我运行测试用例，这是结果

(node:24100) UnhandledPromiseRejectionWarning: FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - 调用 Firebase App.initializeApp() (app/no-app)。(node:24100) UnhandledPromiseRejectionWarning：未处理的承诺拒绝。这个错误要么是因为在没有 catch 块的情况下抛出了异步函数，要么是因为拒绝了一个没有用 .catch() 处理过的承诺。要在未处理的承诺拒绝时终止节点进程，请使用 CLI 标志--unhandled-rejections=strict（请参阅 https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode）。(rejection id: 1) (node:24100) [DEP0018] DeprecationWarning：不推荐使用未处理的承诺拒绝。将来，未处理的承诺拒绝将使用非零退出代码终止 Node.js 进程。(node:24100) UnhandledPromiseRejectionWarning: FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created

• 调用 Firebase App.initializeApp()（应用程序/无应用程序）。(node:24100) UnhandledPromiseRejectionWarning：未处理的承诺拒绝。这个错误要么是因为在没有 catch 块的情况下抛出了异步函数，要么是因为拒绝了一个没有用 .catch() 处理过的承诺。要在未处理的承诺拒绝时终止节点进程，请使用 CLI 标志--unhandled-rejections=strict（请参阅 https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode）。(rejection id: 3) (node:24100) UnhandledPromiseRejectionWarning: FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created
• 调用 Firebase App.initializeApp()（应用程序/无应用程序）。(node:24100) UnhandledPromiseRejectionWarning：未处理的承诺拒绝。这个错误要么是因为在没有 catch 块的情况下抛出了异步函数，要么是因为拒绝了一个没有用 .catch() 处理过的承诺。要在未处理的承诺拒绝时终止节点进程，请使用 CLI 标志--unhandled-rejections=strict（请参阅 https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode）。(拒绝id: 4) PASS src/test/Orders.test.js (8.099s)

有什么想法可以解决这个问题吗？

Answer 1

发生这种情况是因为在您的测试环境中您没有启动 firebase 应用程序（使用initializeApp）并且您可能不应该启动（您不想每次运行测试时都与 firebase 进行通信，尤其是单元测试）。此类问题也适用于其他外部服务，例如您自己的服务器和外部 API。

那么如何测试您的应用程序呢？

答案是模拟 - 为测试环境提供这些服务的替代实现。有某种类型的嘲笑，取决于你想嘲笑什么以及如何嘲笑。此外，有时，这些工具会提供自己的测试套件（同样，它为其公开的方法提供可测试的实现）。

在这种情况下，您可以使用jest模拟机制来模拟来自 Firebase 的响应，以便您的应用程序“不知道”它从其他资源接收到数据，并且会像它应该的那样行事。

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

应用程序规范.js

test("mount", async () => {
  const fetchPromise = Promise.resolve([{ name: "order1" }]);
  jest.spyOn(firebase, "app").mockImplementation(() => ({
    firestore: () => ({
      collection: () => ({
        get: () => fetchPromise
      })
    })
  }));
  let wrapper = mount(<App />);
  await fetchPromise;
  wrapper.update();
  expect(wrapper.find("span").text()).toBe("order1");
});

应用程序.js

export default class App extends React.Component {
  state = {
    orders: []
  };

  fetchOrders() {
    try {
      app()
        .firestore()
        .collection(DATABASE_COLLECTION_ORDERS)
        .get()
        .then((snapShot) => {
          this.setState({ orders: snapShot });
        });
    } catch {
      console.log("do nothing");
    }
  }

  componentDidMount() {
    this.fetchOrders();
  }

  render() {
    return (
      <div className="App">
        {this.state.orders.map((order) => (
          <span key={order.name}>{order.name}</span>
        ))}
      </div>
    );
  }
}

https://codesandbox.io/s/enzyme-setup-in-codesandbox-forked-jyij5?file=/src/App.js:133-730（单击“测试”选项卡）