使用Enzyme测试依赖Head/Meta标签的React组件

当然可以！我之前在测试依赖Rails CSRF token的React组件时，也碰到过完全一样的场景，下面给你几种亲测有效的方法来搞定这个问题：

方法一：直接操作测试环境的DOM，添加meta标签 #

这是最直接的方案，因为react-rails-form-helpers本质上是从document.head里读取对应的meta标签。我们可以在测试的前置步骤中手动添加这个标签，测试完成后再清理，避免影响其他测试用例。

示例代码（结合Jest/Enzyme）：

import { mount } from 'enzyme';
import MyFormComponent from './MyFormComponent';

describe('MyFormComponent', () => {
  beforeEach(() => {
    // 创建并插入CSRF meta标签到head
    const csrfMetaTag = document.createElement('meta');
    csrfMetaTag.setAttribute('name', 'csrf-token');
    csrfMetaTag.setAttribute('content', 'mock-csrf-token-456');
    document.head.appendChild(csrfMetaTag);
  });

  afterEach(() => {
    // 测试结束后移除标签，清理环境
    const csrfMetaTag = document.querySelector('meta[name="csrf-token"]');
    if (csrfMetaTag) {
      document.head.removeChild(csrfMetaTag);
    }
  });

  it('挂载组件并正确读取CSRF token', () => {
    const wrapper = mount(<MyFormComponent />);
    // 验证表单中是否包含正确的CSRF token字段
    expect(wrapper.find('input[name="authenticity_token"]').prop('value'))
      .toBe('mock-csrf-token-456');
  });
});

方法二：封装CSRF token获取逻辑，Mock工具函数 #

如果你的组件代码可以调整，推荐把读取CSRF token的逻辑封装成一个独立的工具函数，这样在测试时可以直接Mock这个函数，不用操作DOM，更利于测试隔离。

步骤1：封装工具函数 #

比如新建src/utils/csrf.js：

export function getCsrfToken() {
  const metaTag = document.querySelector('meta[name="csrf-token"]');
  return metaTag ? metaTag.content : '';
}

步骤2：在组件中使用这个函数 #

import { getCsrfToken } from '../utils/csrf';

function MyFormComponent() {
  const csrfToken = getCsrfToken();
  return (
    <form>
      <input type="hidden" name="authenticity_token" value={csrfToken} />
      {/* 其他表单内容 */}
    </form>
  );
}

步骤3：在测试中Mock这个函数 #

import { mount } from 'enzyme';
import MyFormComponent from './MyFormComponent';
import { getCsrfToken } from '../utils/csrf';

// Mock工具函数，返回测试用的token
jest.mock('../utils/csrf', () => ({
  getCsrfToken: jest.fn(() => 'mock-csrf-token-789'),
}));

describe('MyFormComponent', () => {
  it('挂载组件并使用Mock的CSRF token', () => {
    const wrapper = mount(<MyFormComponent />);
    expect(getCsrfToken).toHaveBeenCalled();
    expect(wrapper.find('input[name="authenticity_token"]').prop('value'))
      .toBe('mock-csrf-token-789');
  });
});

方法三：使用Jest的全局DOM模拟（进阶） #

如果你用Jest作为测试框架，也可以在全局的测试设置文件（比如setupTests.js）中预先添加这个meta标签，这样所有测试用例都能复用这个设置：

// src/setupTests.js
beforeAll(() => {
  const csrfMetaTag = document.createElement('meta');
  csrfMetaTag.setAttribute('name', 'csrf-token');
  csrfMetaTag.setAttribute('content', 'global-mock-csrf-token');
  document.head.appendChild(csrfMetaTag);
});

不过这种方法要注意，如果不同测试用例需要不同的token值，还是用方法一的beforeEach/afterEach更灵活。

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