在TypeScript Jest中导入MockedProvider（@apollo/client/testing）报错

问题描述 #

在TypeScript Jest环境下，从@apollo/client/testing导入MockedProvider和MockedResponse时出现报错，错误信息为：TypeError: Class extends value undefined is not a constructor or null。排查测试代码后未发现循环依赖问题。

报错栈 #

Test suite failed to run

    TypeError: Class extends value undefined is not a constructor or null

      1 | import 'react-native';
      2 | import React from 'react';
    > 3 | import { MockedProvider, MockedResponse } from '@apollo/client/testing';
        | ^
      4 | 
      5 | import renderer from '@tv/test-utils/renderWithProviders';
      6 | import { GetProfileDocument, User } from '@tv/types';

      at Object.__extends (../node_modules/tslib/tslib.js:70:19)
      at ../node_modules/@apollo/client/testing/react/MockedProvider.js:8:5
      at Object.<anonymous> (../node_modules/@apollo/client/testing/react/MockedProvider.js:32:2)
      at Object.<anonymous> (pages/ProfilePage/ProfilePage.spec.tsx:3:1)

触发报错的测试代码 #

import 'react-native';
import React from 'react';
import { MockedProvider, MockedResponse } from '@apollo/client/testing';

describe('Profile Page', () => {
    it('console logs', () => {
        console.log(MockedProvider);
    });
});

相关依赖版本 #

"react-native": "0.64.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"@apollo/client": "^3.5.10",
"jest": "^26.6.3",
"jest-expo": "^44.0.1",
"@babel/core": "~7.17.9",
"ts-jest": "^26.5.6",
"ts-node": "^10.8.1",
"typescript": "~4.6.3",

• Node版本：v14.18.1
• npm版本：6.14.15

Jest配置文件（jest.config.ts） #

import { pathsToModuleNameMapper } from 'ts-jest/utils';
import ts from 'typescript';

const compilerOptions = ts.readConfigFile('tsconfig.json', ts.sys.readFile)
    .config.compilerOptions;

const moduleMap = pathsToModuleNameMapper(compilerOptions.paths);

export default {
    preset: 'jest-expo',
    moduleNameMapper: moduleMap,
    moduleDirectories: [
        '.',
        'src',
        'src/components',
        'src/hooks',
        'node_modules',
    ],
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
    rootDir: 'src',
    testRegex: '.*\\.spec\\.(t|j)sx?$',
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
        '^.+\\.svg$': 'jest-svg-transformer',
    },
    collectCoverageFrom: ['**/*.(t|j)sx?'],
    coverageDirectory: '../coverage',
    transformIgnorePatterns: [
        'node_modules/(?!(jest-)?@?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base)',
    ],
    setupFilesAfterEnv: ['<rootDir>/test-utils/mock-modules.js'],
};

解决方法 #

1. 调整Jest的transformIgnorePatterns配置 #

默认的transformIgnorePatterns排除了node_modules中大部分包的转译，导致@apollo/client的代码未被正确处理，基类无法加载。将@apollo/client添加到例外列表中：

transformIgnorePatterns: [
    'node_modules/(?!(jest-)?@?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@apollo/client)',
],

2. 清除缓存并重新安装依赖 #

• 执行npm cache clean --force清除npm缓存
• 删除node_modules文件夹和package-lock.json文件
• 重新运行npm install

3. 检查TypeScript配置 #

确保tsconfig.json中以下配置正确：

{
    "compilerOptions": {
        "moduleResolution": "node",
        "esModuleInterop": true
    }
}

4. 调整导入路径 #

尝试直接指定MockedProvider的具体文件路径，避免模块导出时的解析问题：

import MockedProvider from '@apollo/client/testing/react/MockedProvider';
import { MockedResponse } from '@apollo/client/testing';

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