【问题标题】:How can I test my calculator using npm test?如何使用 npm test 测试我的计算器?
【发布时间】:2020-10-23 18:17:54
【问题描述】:

我有一个简单的计算器网络项目: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。

【问题讨论】:

  • 你能显示 ./script 的内容(或至少错误周围的行)吗?这里发生的可能是您在该脚本的全局范围内添加一个事件侦听器,这将使其在导入测试后立即运行。如果确实如此,您应该将初始化功能包装在一个函数中并直接从您的入口点调用它。
  • 是的,你需要组织你的代码,这样你就不会触发 UI 事件,为什么添加函数会有一个事件监听器?
  • 为了测试你的代码,你需要先写一个testable代码,你需要重新组织你的代码。
  • 这不是模块化代码,而是一些浏览器脚本。开玩笑不是为此而生的。重写它或进行 e2e 测试,即在 html 中使用

标签: javascript node.js testing npm jestjs


【解决方案1】:

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

现在运行npm run build,应该会生成一个名为dist 的新文件夹。从 src index.htmlstyle.css 和 dist 复制 scripts.js 复制,这应该是您上传到服务器的内容(此步骤可以自动化,以便 dist 包含您的整个代码库,但我不知道 webpack好吧)

要测试您的代码,您只需运行 npm test

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

【讨论】:

  • 它会开始在浏览器中抛出错误,因为没有module
  • 是的,你是对的,我测试过,错误依旧((
  • 当然会在网络浏览器中。但问题是使用 jest 进行单元测试。我刚刚注意到html部分。我很抱歉。
  • @DaniilNedostup 检查我编辑的答案,让我知道这是否可行。假设您在控制台中运行 npm test 之类的东西
  • 这是你的问题,上面的代码 100% 有效。我在本地机器上对其进行了测试,但您的问题是所有内容都在 1 个大文件中。您的脚本正在定义 node.js 中不存在的 DOM 元素。 DOM 仅在 Web 浏览器中可用。为了最好地修复您的代码,您需要将代码分成子模块。我将更新我的答案以包括此类细分。
猜你喜欢
  • 2015-06-30
  • 2018-06-26
  • 2013-08-22
  • 1970-01-01
  • 1970-01-01
  • 2022-08-18
  • 2018-10-30
  • 2011-01-20
相关资源
最近更新 更多