Javascript 对带有jest的组件使用自定义模拟

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

MyScreen.js

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

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

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

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

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

react native tableview

调用了一些特定于iOS的代码，因此我只需返回

\uumocks\ucode>文件夹中的android版本（
CustomTable.android.js
）就可以模拟出它

\uuuu mocks\uuuu/CustomTable.ios.js

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

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

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

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

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

我想做的是用Jest测试
MyScreen.js
，但我想让它使用
\uuuumock\uuuu/CustomTable.ios
。我怎样才能让它做到这一点呢？开玩笑也可以吗？我当前的测试文件如下所示：

tests/MyScreen.test.js

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

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

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

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

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

从“React”导入React；
从“反应测试渲染器”导入渲染器；
从“./src/MyScreen”导入MyScreen；
描述（“测试”，（）=>{
它（“起作用”，（）=>{
jest.mock（“../src/CustomTable.ios”）；
const tree=renderer.create(
,
).toJSON（）；
expect（tree.toMatchSnapshot（）；
});

但是它仍然调用原始版本的
CustomTable.ios
。我做错了什么？
您应该在套件测试之外调用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();
});

从“React”导入React；
从“反应测试渲染器”导入渲染器；
从“./src/MyScreen”导入MyScreen；
jest.mock（“../src/CustomTable.ios”）；
描述（“测试”，（）=>{
它（“起作用”，（）=>{
const tree=renderer.create(
,
).toJSON（）；
expect（tree.toMatchSnapshot（）；
});
我在各地尝试了很多解决方案，但关键是，正如您所提到的，模拟必须位于导入的正下方。谢谢！！