javascript - 对带有 Jest 的组件使用自定义模拟

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 特定的代码，所以我通过在 中简单地返回 android 版本 (CustomTable.android.js) >__mocks__ 文件夹

__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();
});