开玩笑–如何模拟模块的非默认导出? [英] Jest – How to mock non-default exports from modules?

问题描述

我正在尝试从 react-native 中模拟 NativeModules ，但是我找不到只模拟该类而不是整个 react的方法-native 模块.

I am trying to mock NativeModules from react-native, but I can't find a way to only mock that class, and not the entire react-native module.

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

Basically, in my production code I do this:

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

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

In my tests, I want to rewrite MyCustomNativeModule. At the moment the only way I have found is to mock the entire react-native module like this:

// /__mocks__/react-native.js

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

但是，这破坏了所有其他 react-native 函数.我看到人们经常使用诸如 jest.mock('NativeModules'，()=> ...)之类的方法，但实际上似乎不起作用！

But that breaks all the other react-native functions. I saw that often people use methods like jest.mock('NativeModules', () => ... ) but that really doesn't seem to be working!

推荐答案

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

Here is the solution using jest.mock to mock react-native module manually.

为了简单起见，我模拟了 react-native 模块.您可以使用实际的 react-native 代替模拟的代码.

In order to keep it simple, I simulate react-native module. You can use real react-native to replace the simulated one.

文件结构为:

.
├── 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 模块:

index.ts, assume you import and use react-native module in this file:

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％:

Unit test result with 100% coverage:

 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

这篇关于开玩笑–如何模拟模块的非默认导出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！