时间戳

首页 > 解决方案 > 使用 Cypress 对我的 React 应用程序中使用的简单 javascript 函数进行单元测试

javascript - 使用 Cypress 对我的 React 应用程序中使用的简单 javascript 函数进行单元测试

问题描述

我正在使用 Cypress 来测试我的 React 应用程序。到目前为止，我喜欢它，但我想对一些基本功能进行单元测试，包括这个range功能：

const range = (start, end) => {
  const ans = [];
  for (let i = start; i < end; i++) {
    ans.push(i);
  }
  return ans;
};

我尝试将函数导入 acypress/integration/helpers.spec.js但它不起作用：

import { range } from 'utils/helpers';

context('Helpers', () => {
  it('range', () => {
    expect(range(3).toLocaleString.equal([0, 1, 2]));
    expect(range(1, 3).toLocaleString.equal([1, 2]));
  });
});

赛普拉斯抛出以下错误：

找不到模块 'utils/helpers'

将函数导入赛普拉斯的任何提示？赛普拉斯甚至是测试这个简单功能的正确选择，还是我应该使用不同的测试框架？如果可能的话，我更喜欢使用 Cypress，这样我就可以使用单个测试框架。

标签： javascriptcypress

解决方案

模块导入/导出

你忘了export. 在您想在import其他地方使用的模块中，您指定export或者export default如果您只有一个模块。在你的情况下：

export default const range = (start, end) => {
  const ans = [];
  for (let i = start; i < end; i++) {
    ans.push(i);
  }
  return ans;
};

或者

const range = (start, end) => {
  const ans = [];
  for (let i = start; i < end; i++) {
    ans.push(i);
  }
  return ans;
};

export default range;

此外，路径是相对于当前文件设置的，即helpers.spec.js. 在您的情况下，它可能应该是这样的：../support/utils/helpers.

Cypress 中的单元和集成测试

关于单元测试，通常有一种观点认为，集成测试的实现值得更多关注，因为它们可以让您全面检查许多功能以及它们之间的交互，而单元测试旨在仅检查一个功能。

以下是有关单元和集成测试的更多信息： 额外的：

推荐阅读