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

Question

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

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

我尝试将函数导入cypress/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，这样我就可以使用单个测试框架。

Answer 1

模块导入/导出

您忘记了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。

赛普拉斯中的单元和集成测试

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

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

• YouTube video that explains the types of testing and when to apply it.
• A short text version of the video above. It also describes general testing practices in JavaScript.
• The official guide to the Cypress when to write unit tests.

额外的：

• Examples of implementing unit tests from the official Cypress website.
• Useful library for unit tests.