时间戳

首页 > 解决方案 > 如何使用 npm test 测试我的计算器？

javascript - 如何使用 npm test 测试我的计算器？

问题描述

我有一个简单的计算器网络项目：https ://github.com/DANIILNEDOSTUP/js-calculator

我想使用npm + jest做简单的测试（例如加法和减法） 。我创建了package.json并写了这些行：

{
  "scripts": {
    "test": "jest"
  }
}

然后创建script.test.js文件并写了几行：

const add = require('./script');

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

然后我从终端调用npm test命令（我使用 Ubuntu 20.04）

然后我看到一个错误：

TypeError: Cannot read property 'addEventListener' of null

并抱怨 131 行代码

clearKey.addEventLisener('click', clearEquation);

进行测试是否现实？
我想为这个应用程序制作 CI/CD，我不太懂 JavaScript。

标签： javascriptnode.jstestingnpmjestjs

解决方案

我可以看到的主要问题是您的代码甚至没有导出任何内容。您将所有内容都放在一个文件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);
});

编辑

如评论中所述，这在网络浏览器中不起作用。

但是，我能想到的一种技巧是检查 module.exports 是否存在。所以添加到scripts.js以下代码应该“修复它”

if (typeof module.exports !== 'undefined') {
    module.exports = { add }
}

我可以考虑的另一个解决方案是将所有测试代码移到scripts.js这也不是一个好主意（实际上这是一个非常糟糕的主意）并且它不会解决您的特定问题，因为您需要 dom 支持。

编辑 2 如评论中所述，DOMS 不受支持，node.js事实上您正在调用一个测试脚本，该脚本需要一个尝试运行整个文件的模块，该模块在到达 DOM 部分时会失败，以便更好地解决您的问题真的需要将你的代码分解成模块。

此外，我们可以并且将在我们的案例中使用 webpack。如果不使用 webpack，这几乎是不可能的（至少对我而言）。另外，我强烈建议您学习webpack，因为这对您尝试做的事情非常重要。

事不宜迟，这是您的文件夹结构

  • | dist（此文件夹由 webpack 自动生成）
  • | 源代码
    • | 算术.js
    • | 脚本.js
    • | 索引.html
    • | 样式.css
  • | 包.json
  • | webpack.config.js
  • | 测试.js

以及你拥有的所有其他东西，显然它可以被分解得更多并创建更好的代码，但我试图在这里保持简单，而不是让你的逻辑过于复杂。

免责声明：我根本不是 webpack 专业人士，我是后端工程师而不是前端，所以我在 webpack 中引用的任何内容都可以写得比我正在做的要好得多

算术.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
}

脚本.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) => {
...

包.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",
    }),
  ],
};

测试.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从 srcindex.html和style.cssdist 复制scripts.js，这应该是您上传到服务器的内容（此步骤可以自动化，以便 dist 包含您的整个代码库，但我又不太了解 webpack）

要测试您的代码，您可以简单地运行npm test

上面的代码在我的本地机器上可以 100% 正常工作。

推荐阅读