如何用Jest测试PHP文件中的JavaScript代码？

修复当前Jest+JSDOM的报错 #

你遇到的ReferenceError: sum is not defined，是因为script标签内用let定义的sum属于该脚本的局部作用域，并没有暴露到全局（window对象），Jest测试代码的全局作用域自然访问不到它。有两种修复方式：

方式1：将函数挂载到window对象 #

修改script标签内的代码，把函数显式绑定到window：

// script标签内的代码调整为
window.sum = function sum(a, b) {
    return a + b
}

测试时通过window对象访问函数：

expect(window.sum(1, 2)).toBe(3);

方式2：从JSDOM上下文获取变量 #

如果不想修改原JS代码，可直接从JSDOM生成的window对象中提取变量（仅适用于原代码将变量挂载到window的情况，若原代码是let/const局部变量，此方法无效）：

test("test JavaScript code in PHP file", async () => {
    const dom = new JSDOM(`<!DOCTYPE html><body>
    <script>
    let sum = function sum(a, b) {
        return a + b
    }
    window.sum = sum; // 若原代码没挂载，需手动添加这行
    </script>
    </body>`);
    const { window } = dom;
    // 从JSDOM的window上下文获取sum
    expect(window.sum(1, 2)).toBe(3);
});

测试PHP文件中JS的更优方案 #

1. 提取JS代码单独测试 #

写一个简单的Node脚本，用正则从PHP文件中提取所有<script>标签内的JS代码，保存为独立的.js文件，再直接用Jest测试这个文件。示例提取逻辑：

const fs = require('fs');
const phpContent = fs.readFileSync('./your-file.php', 'utf8');
const jsMatches = phpContent.match(/<script>([\s\S]*?)<\/script>/g);
const jsCode = jsMatches.map(match => match.replace(/<\/?script>/g, '')).join('\n');
fs.writeFileSync('./extracted-js.js', jsCode);

2. 用无头浏览器（Puppeteer）模拟真实环境 #

搭建本地PHP服务，用Puppeteer模拟浏览器访问PHP页面，直接在页面上下文执行JS并验证结果，这种方式更贴近真实用户场景，适合测试依赖DOM交互的代码：

const puppeteer = require('puppeteer');

test('test JS in PHP file', async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost/your-php-file.php'); // 本地PHP服务地址
  const sumResult = await page.evaluate(() => {
    return sum(1, 2); // 直接调用页面中的JS函数
  });
  expect(sumResult).toBe(3);
  await browser.close();
});

3. 让PHP单独输出JS内容 #

在PHP文件中添加逻辑，比如通过GET参数控制，当访问your-file.php?test=js时，PHP仅输出<script>标签内的JS代码，然后Jest直接引入该URL返回的内容进行测试。

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