软件测试

什么是测试？

软件测试是为向利益相关者提供有关被测软件产品或服务质量的信息而进行的调查。

[图片上传中...(image-2e77df-1622560751592-12)]

从最基本的意义上说，测试是一种自动化工具，可以尽早发现开发中的错误。这样，您就可以在它们投入生产之前解决这些问题。测试还可以提醒您，您可能忘记检查自己在某个领域的工作，例如可访问性。

简而言之，前端测试验证人们在网站上看到的内容以及他们在网站上使用的功能是否按预期工作。

前端测试适用于应用程序的客户端。例如，前端测试可以验证按下“删除”按钮是否正确地从屏幕上删除了一个项目。但是，它不一定会检查该项目是否确实从数据库中删除了 — 后端测试期间将涵盖此类事情。

简而言之，这就是测试：我们希望在客户端捕获错误并在部署代码之前修复它们。

不同的测试着眼于项目的不同部分

[图片上传失败...(image-cd4801-1622560751592)]

不同类型的测试涵盖项目的不同方面。然而，区分它们并了解每种类型的作用很重要。混淆哪些测试会导致混乱、不可靠的测试服。

理想情况下，您会使用几种不同类型的测试来揭示不同类型的可能问题。某些测试类型具有测试覆盖率分析，可显示该特定测试查看了多少代码（以百分比形式）。这是一个很棒的功能，虽然我已经看到开发人员的目标是 100% 的覆盖率，但我不会仅仅依赖这个指标。最重要的是确保涵盖并考虑所有可能的边缘情况。

所以，有了这个，让我们把注意力转向不同类型的测试。请记住，并不是希望您使用其中的每一个。这是关于能够区分测试，以便您知道在某些情况下使用哪些测试。

单元测试

等级：低
范围：测试应用程序的功能和方法。
可能的工具： , AVA , Jasmine , Jest , Karma , Mocha

单元测试是测试最基本的构建块。它查看单个组件并确保它们按预期工作。这种测试对于任何前端应用程序都是至关重要的，因为有了它，您的组件将根据预期的行为方式进行测试，从而产生更可靠的代码库和应用程序。这也是可以考虑和涵盖边缘情况之类的地方。

单元测试特别适合测试 API。但不是调用实时 API，而是硬编码（或“模拟”）数据确保您的测试运行始终保持一致。

让我们以一个超级简单（和原始）的函数为例：

const sayHello = (name) => {
  if (!name) {
    return "Hello human!";
  }

  return `Hello ${name}!`;
};

同样，这是一个基本情况，但您可以看到它涵盖了一个小的边缘情况，即有人可能忽略了为应用程序提供名字。如果有name，我们会得到“你好${name}！” ${name}我们期望此人提供的东西在哪里。

“嗯，我们为什么要测试这么小的东西？” 你可能想知道。这有一些非常重要的原因：

它迫使你深入思考你的函数可能产生的结果。通常情况下，您确实会发现边缘情况，这有助于您在代码中覆盖它们。
你的代码的某些部分可以依赖于这种边缘情况，如果有人来删除了一些重要的东西，测试会警告他们这个代码很重要并且不能被删除。

单元测试通常小而简单。下面是一个例子：

describe("sayHello function", () => {
  it("should return the proper greeting when a user doesn't pass a name", () => {
    expect(sayHello()).toEqual("Hello human!")
  })

  it("should return the proper greeting with the name passed", () => {
    expect(sayHello("Evgeny")).toEqual("Hello Evgeny!")
  })
})

describe并且it只是语法糖。最重要的线，expect和toEqual。describe并将it测试分解为打印到终端的逻辑块。该expect函数接受我们想要验证的输入，同时toEqual接受所需的输出。您可以使用许多不同的函数和方法来测试您的应用程序。

假设我们正在使用Jest，一个用于编写单元的库。在上面的示例中，Jest 将sayHello在终端中将该函数显示为标题。it函数内的所有内容都被视为单个测试，并在函数标题下方的终端中报告，使所有内容都非常易于阅读。

[图片上传失败...(image-6ebac0-1622560751592)]

绿色复选标记表示我们的两项测试均已通过。耶！

集成测试

等级：中等
范围：测试单元之间的交互。
可能的工具： AVA、Jest、测试库

[图片上传失败...(image-60e861-1622560751592)]

如果单元测试检查块的行为，集成测试可确保块完美地协同工作。这使得集成测试变得非常重要，因为它开启了组件之间的测试交互。应用程序由独立运行的独立部分组成，这种情况非常罕见（如果有的话）。这就是我们依赖集成测试的原因。

我们回到我们单元测试的函数，但这次在一个简单的 React 应用程序中使用它。假设单击按钮会触发问候语出现在屏幕上。这意味着测试不仅涉及功能，还涉及 HTML DOM 和按钮的功能。我们想测试所有这些部分如何协同工作。

这是我们正在测试的组件的代码：

export const Greeting = () => {  
  const [showGreeting, setShowGreeting] = useState(false);  

 return (  
     
     {showGreeting && sayHello()}  
       
   
 );  
};

这是集成测试：

describe('', () => {  
  it('shows correct greeting', () => {  
    const screen = render();  
     const greeting = screen.getByTestId('greeting');  
     const button = screen.getByTestId('show-greeting-button');  

     expect(greeting.textContent).toBe('');  
     fireEvent.click(button);  
     expect(greeting.textContent).toBe('Hello human!');  
 });  
});

我们已经知道describe，并it从我们的单元测试。他们将测试分解为逻辑部分。我们有在特殊的模拟 DOMrender中显示组件的功能，因此我们可以在不接触真实 DOM 的情况下测试与组件的交互——否则，它可能会很昂贵。

接下来，通过测试 ID（分别为和）的测试查询

和

软件测试

什么是测试？

不同的测试着眼于项目的不同部分

单元测试

集成测试

端到端 (E2E) 测试

可访问性测试

视觉回归测试

性能测试

你可能感兴趣的:(软件测试)