CSS文件导致Jest/Puppeteer测试超时的问题求助

我遇到了一个很棘手的问题，下面是我复现问题的完整场景：我用Jest + Puppeteer测试一个叫doSomething的函数，这个函数所在的random.js文件里导入了一个CSS文件index.css。每次运行测试都会超时，哪怕我已经调大了Jest的超时时间还是失败；但只要把random.js里的CSS导入删掉，测试就能正常通过。

相关代码文件： #

random.test.js（测试文件）

/* global doSomething */
jest.setTimeout(10000)
test('dummy test', async () => {
  await page.goto('http://localhost:3333/test/unit/random.html')
  await page.setViewport({ width: 1280, height: 800 })
  await page.waitForFunction('window.doSomething')
  await page.evaluate(function () {
    doSomething()
  })
  expect(true).toBe(true)
})

random.html（测试加载的页面）

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Random Page</title>
  <script type="module">
    import doSomething from 'http://localhost:3333/test/unit/random.js'
    window.doSomething = doSomething
  </script>
</head>
<body>
</body>
</html>

random.js（待测试的函数文件）

import './index.css'
export default function doSomething () {
  console.log('something')
}

index.css（导入的样式文件）

.random-class {
  color: #ffffff;
}

运行的测试命令 #

我通过npm test执行下面的Jest命令：

jest --projects test/unit --runInBand random.test.js

测试输出结果 #

Jest dev-server output:
[Jest Dev server] Starting up http-server, serving ./
[Jest Dev server] http-server version: 14.1.1
http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none
Available on:
  http://127.0.0.1:3333
[Jest Dev server] http://192.168.0.140:3333
  http://10.212.134.200:3333
Hit CTRL-C to stop the server
[Jest Dev server]
[Mon Jul 07 2025 09:55:19 GMT-0700 (Pacific Daylight Time)] "GET /test/unit/random.html" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/105.0.5173.0 Safari/537.36"
(node:2714190) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[Jest Dev server]
[Mon Jul 07 2025 09:55:19 GMT-0700 (Pacific Daylight Time)] "GET /test/unit/random.js" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/105.0.5173.0 Safari/537.36"
[Jest Dev server]
[Mon Jul 07 2025 09:55:19 GMT-0700 (Pacific Daylight Time)] "GET /test/unit/index.css" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/105.0.5173.0 Safari/537.36"

FAIL test/unit/random.test.js (10.409 s)
✕ dummy test (10002 ms)

● dummy test

thrown: "Exceeded timeout of 10000 ms for a test.
Add a timeout value to this test to increase the timeout, if this is a long-running test."

我尝试过的解决方案（但没生效） #

我试过在jest.config.cjs里用moduleNameMapper来mock CSS文件：

moduleNameMapper: {
  '@/(.*)': '<rootDir>/../../src/$1',
  '^d3$': '<rootDir>/../../node_modules/d3/dist/d3.min.js',
  '\\.css$': '<rootDir>/../__mocks__/style-mock.js'
}

对应的style-mock.js内容：

console.log('style-mock called')
module.exports = {}

但这个mock完全没起作用——测试运行时根本没打印style-mock called这句话。有意思的是，如果我不用Puppeteer，直接导入函数写测试，这个mock就会生效，测试也能通过：

import doSomething from './random.js'
// 不使用Puppeteer的测试，能正常通过
test('should something', () => {
  doSomething()
  expect(true).toBe(true)
})

我的疑问 #

看起来Puppeteer好像没正确处理random.js里的CSS导入，也没用上Jest配置里的CSS mock。有没有人知道这到底是哪里出问题了？

对了，我的devDependencies如下：

"devDependencies": {
  "@babel/preset-env": "^7.23.9",
  "chokidar-cli": "^3.0.0",
  "d3": "^7.6.1",
  "eslint": "8.13.0",
  "eslint-plugin-jest": "^27.6.3",
  "http-server": "^14.1.1",
  "jest": "^29.7.0",
  "jest-environment-jsdom": "^29.7.0",
  "jest-puppeteer": "^6.1.1",
  "npm-run-all": "4.1.5",
  "puppeteer": "^16.2.0",
  "standard": "17.0.0",
  "stylelint": "15.2.0",
  "stylelint-config-standard": "30.0.1"
}

内容来源于stack exchange