React中ESLint testing-library禁止直接访问Node的报错解决及疑问

一、container.children、container.firstChild、container.children[0] 的区别 #

• container.children：返回HTMLCollection类型的动态集合，仅包含容器下所有元素类型的子节点（文本、注释等非元素节点会被过滤），DOM结构变化时集合会自动同步更新。
• container.firstChild：返回容器下的第一个子节点，不限制节点类型（可能是文本、注释或元素节点），是单次查询的静态结果，不会随DOM变化自动更新。
• container.children[0]：返回children集合中的第一个元素节点，等价于container.firstElementChild，仅筛选元素节点，同样是静态查询结果。

二、解决ESLint报错的方案 #

Testing Library的核心原则是模拟真实用户的交互逻辑，避免直接操作DOM节点，因此ESLint插件会拦截这类直接访问DOM属性的写法。针对你的快照测试，提供两种合规方案：

方式1：使用Testing Library查询方法定位元素 #

优先通过语义化角色、测试ID等用户可感知的标识定位元素，再生成快照：

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

import Component from '.';

describe('Component testing', () => {
  test('Component', () => {
    render(<Component>I am a message</Component>);
    // 根据组件实际语义角色选择查询方法，比如组件是div用'generic'
    const componentElement = screen.getByRole('generic');
    expect(componentElement).toMatchSnapshot();
  });
});

如果组件有自定义测试标识（如data-testid="component"），可以用screen.getByTestId('component')定位，更精准。

方式2：临时禁用ESLint规则（仅必要时使用） #

若确实需要直接访问容器子节点，可在对应代码行添加注释禁用规则：

import React from 'react';
import { render } from '@testing-library/react';

import Component from '.';

describe('Component testing', () => {
  test('Component', () => {
    const { container } = render(<Component>I am a message</Component>);

    // eslint-disable-next-line testing-library/no-node-access
    expect(container.firstChild).toMatchSnapshot();
  });
});

注意：这种方式尽量少用，避免违背Testing Library的设计理念。

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