Question

我有一个简单的计算器网络项目：TS PR #7029

我想使用 npm + 笑话进行简单的测试（例如加法和减法）。我创建了 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测试命令（我使用Ubuntu 20.04）

然后我看到一个错误：

TypeError: Cannot read property 'addEventListener' of null

并抱怨131行代码

clearKey.addEventLisener('click', clearEquation);

进行测试是否现实？
我想为此应用程序制作CI / CD，但我不太了解JavaScript。

Answer 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);
});

编辑

这在评论中提到的Web浏览器中将不起作用。

但是，我能想到的一种方法是检查module.exports是否存在。因此，将以下代码添加到scripts.js中可以“修复”

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

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

编辑2 如评论中所述，node.js不支持DOMS，并且您正在调用测试脚本，该脚本需要一个模块来尝试运行整个文件，而该文件在到达DOM部分时会失败，因此为了更好地修复您确实需要将代码分解为模块。

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

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

| dist（此文件夹由webpack自动生成）
| src
- |算术.js
- | scripts.js
- | index.html
- | stlye.css
| package.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％正常工作。

如何使用npm test测试计算器？

1 个答案: