介绍

这一系列帖子将指导您完成测试REACT组件的过程，涵盖从简单开始并逐渐潜入更深入的场景的一系列示例。虽然可能需要一些时间才能完成该系列，但我将努力也包括具有挑战性的示例。此外，我鼓励您分享您希望我涵盖的任何特定案例。如果我发现它们对更广泛的受众来说很有价值，我将很乐意将它们纳入该系列。

通过探索React组件的不同测试技术，该系列旨在为开发人员提供有效测试其应用所需的知识和技能。无论您是希望掌握基础知识的初学者还是寻求高级测试策略的经验丰富的开发人员，该系列都将提供见解和实用指导。

随意跟随，如果您有任何疑问或需要进一步澄清，请随时伸出援手。让我们开始掌握React组件测试的旅程！

工具

在这篇文章中，我将使用 jest 和 React测试库**，它们通常都包含在启动项目中，但是如果您没有它们，则可以这样做一个简单的** npm安装-Save-dev Jest 如果您使用的是NPM。
然后您必须将以下内容添加到package.json。

"scripts": {
 "test": "jest"
}

此情况是针对React组件的特定的，但我鼓励您在Google中检查您的特定案例。

测试您的第一个组件

我们将首先探索一个简单而实用的组件。它具有有条件的语句，我们将检查该特定组件的测试方法。

firstComponent.tsx

const FirstComponent = ({name?: string}) => {
 if(data){
   return <div>{name}</div>
 }
return <div>Component without name</div>
}

export default FirstComponent;

现在的测试：

firstComponent.test.tsx

import { render, screen } from '@testing-library/react';
import FirstComponent from './FirstComponent';

test('renders the FirstComponent correctly without a name', () => {
 **get** render(<FirstComponent />);
  const divElement = screen.getByText(/without/i);
  expect(divElement).toBeInTheDocument();
});

test('renders the FirstComponent correctly with a name', () => {
  render(<FirstComponent name="Lautaro" />);
  const divElement = screen.getByText(/Lautaro/i);
  expect(divElement).toBeInTheDocument();
});

现在让我们分解代码：

• 首先，我是导入 和屏幕 React测试库。 渲染函数基本上将使组件渲染到伪造的DOM中，我们可以在以后查询。 屏幕将是查询接口，在这种情况下，我们可以使用 getByText 。

• 我选择了两次调用测试功能，而不是使用替代方法，因为它提供了更清晰的测试和识别测试。此外，我没有明确导入 test 和期望功能，因为它们是在测试环境中自动可用的开玩笑的帮助者。

• 最后，由于组件中存在IF语句，我正在对两种不同的情况进行测试。根据组件是否收到名称道具，它会产生一个结果，如果没有，则会产生不同的结果。我通过选择性通过或省略道具来实现这一目标，在这种情况下，这是可选的。通过检查渲染的HTML，我能够捕获其中的特定文本以确定预期的结果。