unit-testing - Jest – 如何模拟模块中的非默认导出？

Question

我试图模拟 NativeModules来自 react-native ，但我找不到只模拟该类而不是整个 react-native 的方法模块。

基本上，在我的生产代码中，我这样做:

import { NativeModules } from 'react-native'
const { MyCustomNativeModule } = NativeModules

在我的测试中，我想重写 MyCustomNativeModule .目前我发现的唯一方法是模拟整个 react-native像这样的模块:

// /__mocks__/react-native.js

module.exports = {
  NativeModules: {
    MyCustomNativeModule: {
      dismiss: () => {},
    },
  },
}

但这打破了所有其他 react-native职能。我看到人们经常使用 jest.mock('NativeModules', () => ... ) 之类的方法。但这似乎真的不起作用!

Answer 1

这是使用 jest.mock 的解决方案模拟react-native手动模块。

为了简单起见，我模拟了react-native模块。您可以使用真实的react-native替换模拟的。

文件结构为:

.
├── index.spec.ts
├── index.ts
└── react-native.ts

模拟 react-native模块:
react-native.ts :

const NativeModules = {
  MyCustomNativeModule: {
    dismiss: () => {
      // original implementation
      return 'real data';
    }
  }
};

export { NativeModules };

index.ts ，假设您导入并使用 react-native此文件中的模块:

import { NativeModules } from './react-native';

export function main() {
  return NativeModules.MyCustomNativeModule.dismiss();
}

单元测试， index.spec.ts :

import { main } from './';
import { NativeModules } from './react-native';

jest.mock('./react-native', () => {
  return {
    NativeModules: {
      MyCustomNativeModule: {
        dismiss: jest.fn()
      }
    }
  };
});

describe('main', () => {
  it('should mock react-native correctly', () => {
    const mockedData = 'mocked data';
    (NativeModules.MyCustomNativeModule.dismiss as jest.MockedFunction<
      typeof NativeModules.MyCustomNativeModule.dismiss
    >).mockReturnValueOnce(mockedData);

    const actualValue = main();
    expect(actualValue).toBe(mockedData);
    expect(NativeModules.MyCustomNativeModule.dismiss).toBeCalledTimes(1);
  });
});

覆盖率 100% 的单元测试结果:

 PASS  src/stackoverflow/54393006/index.spec.ts
  main
    ✓ should mock react-native correctly (19ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.096s

这是完整的演示: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/54393006