unit-testing - 使用 Enzyme + React Native + Jest 进行测试时常量未定义

Question

我想用 Enzyme 和 Jest 对我的 React Native 组件进行单元测试。

它是一个 QR 扫描仪，在成功扫描后调用一个函数。此函数与服务器通信并返回响应。然后它使用 switch 语句来确定下一步要做什么。当我只使用该应用程序时，该组件及其功能可以正常工作。但是这个函数的单元测试失败了，因为所有的常量都是未定义的。我该如何解决这个问题？

作为引用，这里是我的单元测试代码(为清楚起见已删除):

import React from "react";
import { shallow } from "enzyme";
import { Alert, View } from "react-native";

import * as qrCodeFunctions from "../../api/qrCodes/qrCodes";
import { ScannerScreen } from "./ScannerScreen";

Alert.alert = jest.fn();

const createTestProps = props => ({
  navigation: { navigate: jest.fn() },
  setData: jest.fn(),
  ...props
});

describe("ScannerScreen", () => {
  describe("rendering", () => {
    let wrapper;
    let props;
    beforeEach(() => {
      props = createTestProps();
      wrapper = shallow(<ScannerScreen {...props} />);
    });

    it("should render a <View />", () => {
      expect(wrapper.find(View)).toHaveLength(1);
    });

    it("should render a <QRCodeScanner />", () => {
      expect(wrapper.find("QRCodeScanner")).toHaveLength(1);
    });
  });

  describe("interaction", () => {
    let wrapper;
    let props;
    beforeEach(() => {
      props = createTestProps();
      wrapper = shallow(<ScannerScreen {...props} />);
    });

    afterEach(() => {
      jest.clearAllMocks();
    });

    describe("scanning the qr code", () => {
      describe("data received", () => {
        qrCodeFunctions.executeQRCodeFunction = jest.fn(
          () =>
            new Promise(resolve =>
              resolve({
                entities: {
                  houses: {
                    "b813d3d1-9fdb-47bf-92ee-f7cb8bd6564b": {
                      category: "villa",
                      price: 2.400.000,
                      uuid: "b813d3d1-9fdb-47bf-92ee-f7cb8bd6564b"
                    }
                  },
                  ...
                },
                result: {
                  detail: "Successfully received villas.",
                  qrCodeData: "aeb1717f-480f-415f-9d15-00906750cae2"
                }
              })
            )
        );
        it("should dispatch an event to set the data and show an alert", () => {
          wrapper.instance().onRead({ data: { v1QRCodeData: "abc" } });
          expect(qrCodeFunctions.executeQRCodeFunction).toHaveBeenCalledTimes(1);
          expect(props.setData).toHaveBeenCalledTimes(1);
          expect(Alert.alert).toHaveBeenCalledTimes(1);
        });
      });
    });
  });
});

props.setData 应该根据 switch 语句调用(并且在非单元测试时调用)，就像这样:

  onRead = e => {
    executeQRCodeFunction(e.data.v1QRCodeData)
      .then(data => {
        console.log(data.result);
        console.log(SERVER_VALUES_QR_CODE_DETAIL_VILLAS_RECEIVED);
        console.log(data.result.detail);
        console.log(data.result.detail == SERVER_VALUES_QR_CODE_DETAIL_VILLAS_RECEIVED);
        switch (data.result.detail) {
          case SERVER_VALUES_QR_CODE_DETAIL_VILLAS_RECEIVED:
            this.villasReceived(data);
            break;
          ...
          default:
            alert(data.result);
        }
      })
      .catch(error => {
        alert(error);
      });
  };

函数 villasReceived 然后调用 setData。但在单元测试中，这永远不会发生，因为 switch case 总是引用 default case。此外，控制台日志的结果是，data.result 和 data.result.detail 是正确的，但比较结果是 false 并且常量 undefined.

Answer 1

遇到了类似的问题；我的 Jest 测试因 TypeError: Cannot read property 'manifest' of undefined 在我的模块之一的这一行失败:

import { Constants } from 'expo';

...

  const storeVersion = Constants.manifest.version;    // test fails here

...

解决方案

可以关注mock a node module在 Jest 文档中。

我创建了一个文件 \__mocks__\expo.js(__mocks__ 文件夹需要与 node_modules 文件夹相邻)它:

const Constants = {
  manifest: {
    version: '1.0.0',
  },
};

export {
  Constants
};

显然，您将构建包含您需要的任何属性的虚拟 Constants 对象。