我可以看到的主要问题是您的代码甚至没有导出任何内容。您将所有内容都放在一个文件script.js 中,这不是一个好习惯,可测试的代码会很烦人;不过,暂时还可以。为了解决您的问题,您的脚本应导出 add 方法。
这样的事情应该可以工作。
在scripts.js的末尾写这样的东西
module.exports = { add }
然后在你的测试中
const { add } = require('./script');
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});
编辑
这在 cmets 中提到的网络浏览器中不起作用。
但是,我能想到的一个技巧是检查 module.exports 是否存在。因此,将以下代码添加到 scripts.js 应该“修复它”
if (typeof module.exports !== 'undefined') {
module.exports = { add }
}
我可以考虑的另一个解决方案是将您的所有测试代码移动到 scripts.js 这也不是一个好主意(实际上这是一个非常糟糕的主意)并且它不会解决您的具体问题,因为您需要 dom支持。
编辑 2
如 cmets 中所述,node.js 不支持 DOMS,事实上您正在调用一个测试脚本,该脚本需要一个尝试运行整个文件的模块,该模块在到达 DOM 部分时会失败,以便更好地解决您的问题你真的需要把你的代码分解成模块。
此外,我们可以并且将在我们的案例中使用 webpack。如果不使用 webpack,这几乎是不可能的(至少对我来说)任务。另外我强烈建议你学习webpack,因为它对你想做的事情非常重要。
不用多说,这是你的文件夹结构
- | dist(此文件夹由 webpack 自动生成)
- |源代码
- |算术.js
- |脚本.js
- | index.html
- | stlye.css
- |包.json
- | webpack.config.js
- | test.js
以及您拥有的所有其他东西,显然它可以分解得更多并创建更好的代码,但我试图在这里保持简单,而不是让您的逻辑过于复杂。
免责声明:我根本不是 webpack 专业人士,我是后端工程师而不是前端,所以我在 webpack 中引用的任何内容都可以写得比我正在做的更好
arithmetics.js
const add = (a, b) => +a + +b;
const substract = (a, b) => +a - +b;
const multiply = (a, b) => a * b;
const divide = (a, b) => (b == '0' ? 'Err' : roundResult(a / b));
const roundResult = (n) => Math.round((n + Number.EPSILON) * 100) / 100; // Rounds n to 2 decimal places
module.exports = {
add,
subtract,
multiply,
divide,
roundResult
}
scripts.js
/* Math operations */
let equation = '0';
let previousEquation = '0';
let previousOperator = '';
const {add, substract, multiply, divide, roundResult} = require('./arithmetics');
const operate = (operator, a, b = a) => {
...
package.json
...
"scripts": {
...
"dev": "webpack --mode development",
"build": "webpack --mode production"
"test": "jest",
...
},
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.2.0",
"webpack-cli": "^4.1.0"
}
...
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
entry: './src/scripts.js',
output: {
filename: 'scripts.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
title: "Webpack Output",
}),
],
};
test.js
const { add } = require('./src/arithmetics');
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});
注意:任何我没有包含其代码的文件都应该保持不变
注意2:确保运行npm install或yarn来安装包!
现在运行npm run build,应该会生成一个名为dist 的新文件夹。从 src index.html、style.css 和 dist 复制 scripts.js 复制,这应该是您上传到服务器的内容(此步骤可以自动化,以便 dist 包含您的整个代码库,但我不知道 webpack好吧)
要测试您的代码,您只需运行 npm test
上面的代码在我的本地机器上可以 100% 正常运行。