在前端开发中，测试是一个极为重要的环节，而 Jest 是一个强大的 JavaScript 测试框架，提供了简单易用的 API 和强大的测试组织、管理和执行功能，被广泛应用于前端项目中。然而，在使用 Jest 进行单元测试时，我们可能会遇到 SyntaxError: Unexpected token < 的错误，本文将分析这个错误的原因，并提供解决方案。
问题分析
当我们在使用 Jest 进行单元测试时，如果出现 SyntaxError: Unexpected token < 的错误，就说明 Jest 在解析我们的测试文件时遇到了一个意外的字符，而这个字符往往是一个 <。这个错误通常是由于在测试文件中导入了一个非 JavaScript 文件，比如一个 HTML 或者 CSS 文件导致的。
比如，我们在测试文件中导入了一个样式文件：
import "./style.css";
这个时候，Jest 就会尝试解析这个样式文件，但由于样式文件是一个纯文本文件，而不是一个 JavaScript 文件，所以解析器会报错。
解决方案
为了解决这个问题，我们需要告诉 Jest 如何处理非 JavaScript 文件。Jest 提供了一个配置选项叫做 transformIgnorePatterns，可以用来指定不需要被转换的文件。
我们可以在 Jest 的配置文件中添加以下内容：
module.exports = { transformIgnorePatterns: [ "/node_modules/", "\\.p?css$" ], // other configurations... };
上面的配置选项的作用是告诉 Jest 在解析时忽略 node_modules 目录中的文件以及所有以 .css，.sass 和 .scss 结尾的文件。
如果还有其他需要忽略的文件，可以根据实际情况添加正则表达式。
示例代码
以下是一个包含样式文件导入的测试文件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ --------------- ------ --------- ---- -------------- -------------------- ---- -- -- - ------------- ---------- -- -- - ----- - ----------- - - ----------------- ---- ----------------------------------------------------- --- ---展开代码
以下是一个使用 transformIgnorePatterns 配置选项的 Jest 配置文件：
module.exports = { transformIgnorePatterns: [ "/node_modules/", "\\.p?css$" ], // other configurations... };
总结
在使用 Jest 进行单元测试时，遇到 SyntaxError: Unexpected token < 的错误，通常是由于测试文件中导入了非 JavaScript 文件导致的。为了解决这个问题，我们需要在 Jest 的配置文件中添加 transformIgnorePatterns 配置选项，告诉 Jest 忽略非 JavaScript 文件的解析。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65027c5d95b1f8cacdfc3827
