使用自定义模拟来开玩笑的组件

Question

我正在编写一个 React-Native 应用程序，其中有一个需要测试的屏幕：

MyScreen.js

import React, { Component } from "react";
import CustomTable from "./CustomTable";

export default MyScreen extends Component {
  render() {
    return <CustomTable />;
  }
}

CustomTable.ios.js

import React, { Component } from "react";
import { View } from "react-native";
import TableView from "react-native-tableview";

export default MyScreen extends Component {
  render() {
    return (
      <View>
        ...some stuff
        <TableView />
      </View>
    );
  }
}

react-native-tableview 调用了一些 iOS 特定代码，所以我通过简单地返回 __mocks__ 文件夹中的 android 版本 (CustomTable.android.js) 来模拟它

__mocks__/CustomTable.ios.js

import CustomAndroidTable from "../CustomTable.android";
export const CustomTable = CustomAndroidTable;

我想做的是用 Jest 测试MyScreen.js，但我希望它使用__mock__/CustomTable.ios。我该如何让它做到这一点？ Jest 甚至可以做到这一点吗？我当前的测试文件如下所示：

tests/MyScreen.test.js

import React from "react";
import renderer from "react-test-renderer";
import MyScreen from "../src/MyScreen";

describe("test", () => {
  it("works", () => {
  jest.mock("../src/CustomTable.ios");
  const tree = renderer.create(
    <MyScreen />,
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

但它仍然调用原始版本的CustomTable.ios。我做错了什么？

Answer 1

您应该在套件测试之外调用 jest.mock。它应该在您的导入之后立即出现。

import React from "react";
import renderer from "react-test-renderer";
import MyScreen from "../src/MyScreen";

jest.mock("../src/CustomTable.ios");

describe("test", () => {
  it("works", () => {
  const tree = renderer.create(
    <MyScreen />,
  ).toJSON();
  expect(tree).toMatchSnapshot();
});