如何在 Jest 测试框架中测试带有 PropTypes 类型检查的 React 组件-JavaScript中文网-JavaScript教程资源分享门户

在 React 应用开发过程中，PropTypes 类型检查可以大大提高组件代码的可读性和维护性。在测试阶段，我们也需要确保组件的PropTypes类型检查正确，以避免运行时错误。如何在 Jest 测试框架中测试带有PropTypes类型检查的 React 组件呢？

本文将详细介绍在 Jest 中测试带有PropTypes类型检查的 React 组件的方法，包括设置 Jest 配置、编写测试用例和针对PropTypes类型检查的测试。

配置 Jest

在开发环境中，配置 Jest 可以使用create-react-app自带的配置，不需要手动修改。在使用自己的配置时，需要注意以下几点：

jest-environment-jsdom与jsdom的版本需要一致。
添加jsdom-global/register模块以便在 Node.js 环境中引入 JSDOM。

// jest.config.js 
module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom', 'jsdom-global/register'],
}

编写测试用例

测试用例是用来测试PropTypes类型检查的最基本要素。首先，我们需要编写一个简单的React组件，然后编写测试用例来测试是否正确渲染并传入了正确的属性后，PropTypes是否检查通过。

编写组件

以一个简单的按钮组件为例子：

// javascriptcn.com 代码示例
import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ onClick, disabled, children }) => (
  <button onClick={onClick} disabled={disabled}>
    {children}
  </button>
);

Button.propTypes = {
  onClick: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  children: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element),
  ]).isRequired,
};

export default Button;

编写测试用例

我们可以基于上述组件编写测试用例，通过Jest自带的快照测试功能（Snapshot Testing）检查组件是否正确渲染，并使用其它测试方法来检查PropTypes类型检查是否通过。

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../Button';

test('renders button correctly', () => {
  const { container } = render(<Button onClick={() => {}}>Click me</Button>);
  expect(container.firstChild).toMatchSnapshot();
});

test('pass all PropTypes check', () => {
  const { getByRole } = render(
    <Button onClick={() => {}} disabled={true}>
      Click me
    </Button>,
  );
  expect(getByRole('button')).toBeDisabled();
});

针对 PropTypes 的测试

对于包含PropTypes类型检查的组件，我们需要针对不同类型的属性进行测试，以确定是否按照预期进行类型检查。以下是具体的测试方法和示例代码。

PropTypes.string

使用测试用例来测试是否能正确检查和接收字符串类型的属性。

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../Button';

test('pass string prop types check', () => {
  const { getByRole } = render(
    <Button onClick={() => {}} disabled={false} title="button title">
      Click me
    </Button>,
  );
  expect(getByRole('button')).toHaveAttribute('title', 'button title');
});

PropTypes.number

使用测试用例来测试是否能正确检查和接收数字类型的属性。

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../Button';

test('pass number prop types check', () => {
  const { getByRole } = render(
    <Button onClick={() => {}} disabled={false} style={{ padding: 10 }}>
      Click me
    </Button>,
  );
  expect(getByRole('button')).toHaveStyle({ padding: '10px' });
});

PropTypes.element

使用测试用例来测试是否能正确检查和接收元素类型的属性。

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../Button';

test('pass element prop types check', () => {
  const CustomIcon = () => <i className="icon"></i>;
  const { getByRole } = render(
    <Button onClick={() => {}} disabled={false} icon={<CustomIcon />}>
      Click me
    </Button>,
  );
  expect(getByRole('button').querySelector('.icon')).toBeTruthy();
});

PropTypes.bool

使用测试用例来测试是否能正确检查和接收布尔类型的属性。

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../Button';

test('pass bool prop types check', () => {
  const { getByRole } = render(
    <Button onClick={() => {}} disabled={true}>
      Click me
    </Button>,
  );
  expect(getByRole('button')).toBeDisabled();
});

PropTypes.object

使用测试用例来测试是否能正确检查和接收对象类型的属性。

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../Button';

test('pass object prop types check', () => {
  const { getByRole } = render(
    <Button onClick={() => {}} disabled={false} style={{ padding: 10 }}>
      Click me
    </Button>,
  );
  expect(getByRole('button')).toHaveStyle({ padding: '10px' });
});

PropTypes.arrayOf

使用测试用例来测试是否能正确检查和接收数组类型的属性。

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import Button from '../Button';

test('pass arrayOf prop types check', () => {
  const { getByRole } = render(
    <Button onClick={() => {}} disabled={false} children={['click me', <span key="1">, too</span>]}>
      Click me
    </Button>,
  );
  expect(getByRole('button')).toHaveTextContent('click me, too');
});

总结

本文主要介绍了如何在 Jest 中测试带有 PropTypes 类型检查的 React 组件。在配置 Jest 环境后，我们可以通过快照测试以及其他针对不同类型属性的测试，来确保 PropTypes 类型检查能够正确工作。希望这篇文章能够帮助你更好地进行 React 组件开发和测试。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528ea547d4982a6ebb78482