jest 如何动态导入模块？

问题描述

// I18nService.js
let userLangName = navigator.language;
export default class I18nService {
  static getUserLanguage() {
    if (userLangName.indexOf('ko') > -1) {
      return 'ko';
    } else {
      return 'en';
    }
  }
}

使用import导入I18nService时，会立即获取浏览器语言。如果我们想要模拟浏览器各种语言的情况，使用静态的import无法拦截在引入模块时就赋值的操作。所以我们需要解决如何在引入I18nService之前模拟浏览器语言的值的问题。

如何解决

静态的 ES6 模块导入语句将会被置于文件顶部，如果想要进行模块的动态导入，需要配置支持动态导入的环境。

环境配置

• babel 初始设置
• 添加 babel-plugin-dynamic-import-node 插件或者其他有相同功能的插件来确保 Babel 开启了在 Node 中动态导入的配置

jest示例

// I18nService.test.js
import { jest } from '@jest/globals';

describe('I18nService', () => {
  test('lang is ko', () => {
    // 模拟navigator.language的值
    jest.spyOn(window.navigator, 'language', 'get').mockImplementation(() => 'ko');
    // 动态引入，返回Promise
    return import('../../src/service/I18nService').then((module) => {
      expect(module.default.getUserLanguage()).toBe('ko');
      jest.resetModules();
      jest.resetAllMocks();
    });
  });
});