使用@okta/okta-auth-js时Jest测试报TypeError问题求助

问题描述 #

我开发了一个React应用，用@okta/okta-auth-js包实现Okta单点登录（SSO），认证文件代码如下：

import OktaAuth, { OktaAuthOptions } from '@okta/okta-auth-js';

const oktaConfig: OktaAuthOptions = {
  issuer: `issuer_val_here`,
  ...etc,
};

const oktaAuth = new OktaAuth(oktaConfig);

应用运行正常，但跑Jest测试时直接报错：

TypeError: _oktaAuthJs.default is not a constructor

      28 | };
      29 |
    > 30 | const oktaAuth = new OktaAuth(oktaConfig);
         |                  ^

试过在package.json加moduleNameMapper、各种jest.mock写法和setupTests.js全局Mock，都没解决问题。

解决方案 #

这个问题是Jest处理@okta/okta-auth-js模块导出时的兼容问题，导致默认导出被解析成非构造函数类型，以下几种方法可以解决：

方法1：直接Mock构造函数 #

在测试文件顶部添加Mock代码，手动指定默认导出为模拟构造函数：

jest.mock('@okta/okta-auth-js', () => {
  // 模拟OktaAuth构造函数，同时返回带业务所需方法的实例
  const mockOktaAuth = jest.fn().mockImplementation(() => ({
    login: jest.fn().mockResolvedValue({}),
    logout: jest.fn().mockResolvedValue({}),
    getAccessToken: jest.fn().mockReturnValue('mock-token')
    // 按需添加你用到的其他方法
  }));

  // 导出类型定义（适配TypeScript）
  return {
    default: mockOktaAuth,
    OktaAuthOptions: jest.fn()
  };
});

方法2：全局Mock（所有测试生效） #

如果多个测试文件都用到这个包，可以在setupTests.js里配置全局Mock：

// setupTests.js
jest.mock('@okta/okta-auth-js', () => {
  const mockOktaAuth = jest.fn().mockImplementation(() => ({
    // 按需定义方法
  }));

  return {
    default: mockOktaAuth,
    OktaAuthOptions: {}
  };
});

方法3：让Jest转译Okta包 #

部分情况下，Okta包的ES模块语法在Jest环境下未被正确转译，可在Jest配置中添加transformIgnorePatterns，让Jest处理该包：

// package.json中的jest配置
"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!@okta/okta-auth-js)"
  ]
}

内容的提问来源于stack exchange，提问作者foakesm