从特定测试组的模块模拟常量属性

Question

我有 MyComponent.tsx 使用 constants.ts 模块来根据 IS_IOS 常量做一些事情：

import React from 'react';
import { Text, View } from 'react-native';

import { platform } from '../../constants';

const { IS_IOS } = platform;
interface Props {}

export const MyComponent = (props: Props) => {
  return (
    <View>
      <Text>Alpha Beta { String(IS_IOS) }</Text>
    </View>
  );
};

我试图在每个测试中以不同的方式模拟 constants.ts。 and here的所有方法我都试过了，还是没有结果。该模块根本没有被模拟。这是我的测试文件和组件文件：

MyComponent.test.tsx:

// @ts-nocheck
import React from 'react';
import { cleanup, render } from '@testing-library/react-native';
import { MyComponent } from '../../../src/MyComponent';

describe('MyComponent', () => {
  afterEach(() => {
    jest.resetModules();
    jest.clearAllMocks();
    cleanup();
  });

  it('one', () => {
    jest.mock('../../../src/constants', () => ({
      platform: { IS_IOS: false }
    }));

    const { debug } = render(<MyComponent/>);
    debug();
  });

  it('two', () => {
    jest.mock('../../../src/constants', () => ({
      platform: { IS_IOS: true }
    }));

    const { debug } = render(<MyComponent/>);
    debug();
  });
});

这是我进入控制台的结果：

  console.log
    <View>
      <Text>
        Alpha Beta 
        true
      </Text>
    </View>

      at debugDeep (node_modules/@testing-library/react-native/build/helpers/debugDeep.js:19:13)

  console.log
    <View>
      <Text>
        Alpha Beta 
        true
      </Text>
    </View>

      at debugDeep (node_modules/@testing-library/react-native/build/helpers/debugDeep.js:19:13)

现在，如果我把 jest.mock 放在文件的开头，它就可以工作，但问题是它模拟 IS_IOS 具有相同的值（即 IS_IOS = false）：

// @ts-nocheck
import React from 'react';
import { cleanup, render } from '@testing-library/react-native';
import { MyComponent } from '../../../src/MyComponent';

jest.mock('../../../src/constants', () => ({
  platform: { IS_IOS: false }
}));

describe('MyComponent', () => {
  afterEach(() => {
    jest.resetModules();
    jest.clearAllMocks();
    cleanup();
  });

  it('one', () => {
    const { debug } = render(<MyComponent/>);
    debug();
  });

  it('two', () => {
    const { debug } = render(<MyComponent/>);
    debug();
  });
});

正如我所说，在两种情况下都是模拟：

  console.log
    <View>
      <Text>
        Alpha Beta 
        false
      </Text>
    </View>

      at debugDeep (node_modules/@testing-library/react-native/build/helpers/debugDeep.js:19:13)

  console.log
    <View>
      <Text>
        Alpha Beta 
        false
      </Text>
    </View>

      at debugDeep (node_modules/@testing-library/react-native/build/helpers/debugDeep.js:19:13)

我试过 jest.doMock，试过添加 __esModule - none 行得通。我如何在每个测试中以不同的方式模拟模块？

提前感谢您的宝贵时间！

Answer 1

jest.resetModules 不能影响已经导入的模块。它应该与测试本地的 require 结合，以便测试特定的 jest.mock 影响它。

ES 模块应该用魔术 __esModule 属性来模拟它们，以免它们被作为 CommonJS 模块处理：

jest.mock('../../../src/constants', () => ({
  __esModule: true,
  platform: { IS_IOS: false }
}));
const { MyComponent } = require('../../../src/MyComponent');

从特定测试组的模块模拟常量属性

Mock a constant property from a module for a specific test group

jestjs

react-testing-library

从特定测试组的模块模拟​​常量 属性

Mock a constant property from a module for a specific test group

jestjs

react-testing-library

从特定测试组的模块模拟常量属性