React Jest测试：如何根据入参测试图片与文本框的对齐方式

1. 先实现符合需求的示例组件 #

首先我们定义一个支持通过 variant 参数控制对齐的组件，核心是通过类名绑定 CSS 对齐规则：

组件代码（ImageTextBlock.jsx） #

import React from 'react';
import './ImageTextBlock.css';

const ImageTextBlock = ({ 
  variant = 'textLeft-middleAlign', 
  imageSrc, 
  text 
}) => {
  return (
    <div className={`image-text-block ${variant}`}>
      <img src={imageSrc} alt="content" className="block-image" />
      <div className="block-text">{text}</div>
    </div>
  );
};

export default ImageTextBlock;

样式文件（ImageTextBlock.css） #

.image-text-block {
  display: flex;
  width: 100%;
  gap: 16px;
}

.block-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

.block-text {
  flex: 1;
}

/* 左右对齐规则 */
.textLeft {
  flex-direction: row;
}

.textRight {
  flex-direction: row-reverse;
}

/* 上下对齐规则 */
.topAlign {
  align-items: flex-start;
}

.middleAlign {
  align-items: center;
}

.bottomAlign {
  align-items: flex-end;
}

2. Jest 测试实现 #

我们使用 @testing-library/react 来渲染组件并验证对齐状态，核心思路是检查 flex 容器的样式属性是否符合预期。

第一步：安装依赖 #

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

测试代码（ImageTextBlock.test.jsx） #

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import ImageTextBlock from './ImageTextBlock';

describe('ImageTextBlock 对齐测试', () => {
  const baseProps = {
    imageSrc: 'test.jpg',
    text: '测试文本内容'
  };

  // 左右对齐验证
  describe('水平对齐', () => {
    test('传入 textRight 时，文本在左、图片在右', () => {
      render(<ImageTextBlock variant="textRight-middleAlign" {...baseProps} />);
      const container = screen.getByRole('img').parentElement;
      expect(container).toHaveStyle('flex-direction: row-reverse');
    });

    test('传入 textLeft 时，文本在右、图片在左', () => {
      render(<ImageTextBlock variant="textLeft-middleAlign" {...baseProps} />);
      const container = screen.getByRole('img').parentElement;
      expect(container).toHaveStyle('flex-direction: row');
    });
  });

  // 上下对齐验证
  describe('垂直对齐', () => {
    test('传入 topAlign 时，内容顶部对齐', () => {
      render(<ImageTextBlock variant="textLeft-topAlign" {...baseProps} />);
      const container = screen.getByRole('img').parentElement;
      expect(container).toHaveStyle('align-items: flex-start');
    });

    test('传入 middleAlign 时，内容居中对齐', () => {
      render(<ImageTextBlock variant="textLeft-middleAlign" {...baseProps} />);
      const container = screen.getByRole('img').parentElement;
      expect(container).toHaveStyle('align-items: center');
    });

    test('传入 bottomAlign 时，内容底部对齐', () => {
      render(<ImageTextBlock variant="textLeft-bottomAlign" {...baseProps} />);
      const container = screen.getByRole('img').parentElement;
      expect(container).toHaveStyle('align-items: flex-end');
    });
  });
});

3. 测试说明 #

• 我们通过获取图片元素的父容器（即 flex 布局容器），直接断言其 flex-direction（控制左右对齐）和 align-items（控制上下对齐）样式属性，这是最直接验证对齐状态的方式。
• 如果你的组件使用 CSS Modules、Styled Components 等方案，只需调整断言逻辑：比如验证容器的类名是否包含对应变体，或者直接读取 styled 组件的样式值即可。

内容的提问来源于stack exchange，提问作者Thanos