AOR v1.4.0简单列表单元测试：控制台无HTML日志输出

嘿，我之前也碰到过Admin-on-Rest（AOR）单元测试里看不到预期HTML日志的情况，结合你给出的代码片段，咱们一步步来排查解决：

1. 先确认核心问题：组件渲染依赖的上下文没配齐 #

AOR的List、Datagrid这类组件必须在Admin上下文和Redux Store的支持下才能正常渲染。如果你的测试代码里没正确包裹这些依赖，组件可能根本没渲染出你预期的DOM结构，自然看不到HTML日志。

给你一个能跑通的测试结构示例：

import * as React from 'react';
import { mount } from 'enzyme';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { Admin, Resource } from 'admin-on-rest';
import { CategoryList } from '../Categories';

// 模拟一个极简的根reducer（AOR必须依赖Redux Store）
const rootReducer = (state = {}, action) => state;

describe('CategoryList 渲染测试', () => {
  let store;

  beforeEach(() => {
    store = createStore(rootReducer);
  });

  it('应该渲染带一行数据的Datagrid', () => {
    // 用mount而不是shallow！shallow只会渲染组件本身，不会展开子组件（比如Datagrid）
    const wrapper = mount(
      <Provider store={store}>
        <Admin>
          <Resource name="categories" list={CategoryList} />
        </Admin>
      </Provider>
    );
    
    // 手动输出完整HTML到控制台
    console.log(wrapper.html());
    
    // 顺便加个断言验证渲染结果
    expect(wrapper.find('Datagrid').length).toBe(1);
    expect(wrapper.find('tr').length).toBe(2); // 表头行 + 数据行
  });
});

2. 选对Enzyme的渲染方法 #

不同渲染方法的输出范围差别很大，别用错了：

• shallow：只渲染当前组件，不会渲染子组件（比如Datagrid会被当成黑盒），看不到完整列表HTML。
• mount：渲染完整组件树，包括所有上下文和子组件，适合测试AOR的复杂组件。
• render：把组件转成静态HTML字符串，也可以用来输出查看，用法如下：

import { render } from 'enzyme';

// ...其他代码
const staticHtml = render(
  <Provider store={store}>
    <Admin>
      <Resource name="categories" list={CategoryList} />
    </Admin>
  </Provider>
).html();
console.log(staticHtml);

3. 模拟数据源（如果需要） #

如果你的CategoryList依赖API返回的数据，要么模拟AOR的DataProvider，要么直接给组件传模拟的data props，跳过上下文直接测试组件本身：

it('直接渲染带模拟数据的列表', () => {
  const mockData = [{ id: 1, name: '测试分类' }];
  const wrapper = mount(
    <Provider store={store}>
      <CategoryList data={mockData} />
    </Provider>
  );
  console.log(wrapper.html());
  expect(wrapper.find('td').text()).toContain('测试分类');
});

4. 检查测试框架的控制台捕获设置 #

比如Jest会默认捕获控制台输出，如果想在测试时看到日志，要么用--verbose参数运行测试，要么在测试代码里临时禁用捕获：

it('输出HTML日志', () => {
  jest.spyOn(console, 'log').mockImplementation(() => {});
  // ...渲染组件代码
  console.log(wrapper.html());
  console.log.mockRestore();
});

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