如何在jest和apred-testing-library中模拟document.getElementsbyclassname（）？

Question

我们如何模拟document.getElementsByClassNames（）在jest/ react-testing-library中，因为代码的这些部分未涵盖代码覆盖

import { useEffect } from "react";
import "./styles.css";
const numbers = [1, 2, 3, 4, 5, 6];
export default function App() {

  useEffect(() => {
    const headings = [...document.getElementsByClassName("heading")];

    if(!!headings.length){
      console.log("DO SOMETHING !!")
    }
    headings?.map((heading) => {
      return heading.setAttribute("id", "header-toggle");
    });
    
  }, []);

  return (
    <div className="App">
      {numbers?.map((num) => {
        return <h1 className="heading">{num}</h1>;
      })}
    </div>
  );
}

app.test.js

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import App from './App'

afterEach(cleanup);

  it('render App', () => {

document.getElementsByClassName() = jest.fn().mockImplementation([{setAttribute:jest.fn()}])

    const { container } = render(<App/>); 
    expect(container).toBeInTheDocument()
   });

Answer 1

不要模拟document.getElementsByClassName（）并测试实现细节。而是测试组件的行为，例如组件呈现的内容。

您可以断言是否正确设置了ID HTML属性。

例如

app.tsx：

import React from 'react';
import { useEffect } from 'react';

const numbers = [1, 2, 3, 4, 5, 6];
export default function App() {
  useEffect(() => {
    const headings = [...document.getElementsByClassName('heading')];

    if (!!headings.length) {
      console.log('DO SOMETHING !!');
    }
    headings.map((heading, i) => {
      return heading.setAttribute('id', `header-toggle-${i}`);
    });
  }, []);

  return (
    <div className="App">
      {numbers.map((num) => {
        return <h1 key={num} className="heading">{num}</h1>;
      })}
    </div>
  );
}

app.test.tsx：

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import App from './App';

describe('App', () => {
  it('render App', () => {
    const { container } = render(<App />);
    expect(container).toBeInTheDocument();
  });

  it('render App with numbers', () => {
    const { getByText } = render(<App />);
    const numbers = [1, 2, 3, 4, 5, 6];
    numbers.forEach((n, i) => {
      expect(getByText(`${n}`)).toBeInTheDocument();
      expect(getByText(`${n}`).id).toEqual(`header-toggle-${i}`);
    });
  });
});

测试结果：

 PASS  stackoverflow/72626153/App.test.tsx (9.755 s)
  App
    ✓ render App (40 ms)
    ✓ render App with numbers (21 ms)

  console.log
    DO SOMETHING !!

      at stackoverflow/72626153/App.tsx:10:15

  console.log
    DO SOMETHING !!

      at stackoverflow/72626153/App.tsx:10:15

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |       50 |     100 |     100 |                   
 App.tsx  |     100 |       50 |     100 |     100 | 9                 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        10.256 s, estimated 11 s
Ran all test suites related to changed files