Next.js 13集成Supabase单元测试报错：Unexpected token 'export'

问题根源 #

createClientComponentClient() 是Supabase专为Next.js App Router客户端组件设计的方法，Jest默认的模块解析逻辑没法处理它的ES模块导出格式，直接执行会触发Unexpected token 'export'错误。同时这个方法依赖客户端环境，测试时必须Mock掉真实实现。

解决方案步骤 #

1. 配置Jest适配Next.js环境

用Next官方提供的next/jest预设，它会自动处理Next.js的模块解析和ES模块兼容：
在jest.config.js里添加：

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './', // 你的Next.js项目根目录
})

const customJestConfig = {
  testEnvironment: 'jsdom', // 客户端组件测试需要jsdom环境
  moduleNameMapper: {
    // 可选：处理CSS等静态资源的Mock
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
  },
}

module.exports = createJestConfig(customJestConfig)

2. Mock createClientComponentClient

在测试文件顶部直接Mock这个方法，返回模拟的Supabase客户端，避免执行真实逻辑：

import { render, screen, fireEvent } from '@testing-library/react'
import SignUpPage from '../app/signup/page'
import { RouterContext } from 'next/dist/shared/lib/router-context'

// Mock Supabase的客户端创建方法
jest.mock('@supabase/auth-helpers-nextjs', () => ({
  createClientComponentClient: jest.fn(() => ({
    auth: {
      signUp: jest.fn().mockResolvedValue({
        data: { user: { id: 'test-id' } },
        error: null,
      }),
    },
  })),
}))

// 模拟RouterContext的必要属性
const mockRouter = {
  push: jest.fn(),
  replace: jest.fn(),
  prefetch: jest.fn(),
}

test('渲染注册页面并模拟提交', async () => {
  render(
    <RouterContext.Provider value={mockRouter}>
      <SignUpPage />
    </RouterContext.Provider>
  )

  // 输入测试数据
  fireEvent.change(screen.getByLabelText(/邮箱/i), { target: { value: 'test@example.com' } })
  fireEvent.change(screen.getByLabelText(/密码/i), { target: { value: 'password123' } })

  // 触发提交
  fireEvent.click(screen.getByRole('button', { name: /注册/i }))

  // 断言Supabase的signUp方法被调用
  const { createClientComponentClient } = require('@supabase/auth-helpers-nextjs')
  const mockSupabase = createClientComponentClient()
  expect(mockSupabase.auth.signUp).toHaveBeenCalledWith({
    email: 'test@example.com',
    password: 'password123',
  })
})

3. 排查额外转译问题

如果仍报错，在jest.config.js的transformIgnorePatterns里排除Supabase相关包，确保Jest能转译它们：

const customJestConfig = {
  // ...其他配置
  transformIgnorePatterns: [
    '/node_modules/(?!@supabase/auth-helpers-nextjs|@supabase/supabase-js)',
  ],
}

这样就能让Jest正确解析Supabase模块，同时Mock客户端创建逻辑，顺利测试组件的渲染和提交功能。

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