如何測試在 useEffect 掛鈎中調用的 function

Question

我有一個在 useEffect 內部調用的 function ，但我無法將覆蓋范圍傳遞到那里。 function 根據視口寬度更改 state 的值，用於渲染 html。 基本上我做一個條件渲染。 這是 function updateMedia的代碼：

 import { useEffect, useState } from "react"; import { Contact } from "../../features/contacts/models/Contact"; import IndividualContactStyled from "./IndividualContactStyled"; interface ContactProps { contact: Contact; } // eslint-disable-next-line @typescript-eslint/no-redeclare const IndividualContact = ({ contact }: ContactProps): JSX.Element => { const initialState = false; const [isDesktop, setIsDesktop] = useState(initialState); const updateMedia = () => { setIsDesktop(window.innerWidth > 799); }; useEffect(() => { window.addEventListener("resize", updateMedia); return () => window.removeEventListener("resize", updateMedia); }); return ( <IndividualContactStyled className="contact"> {isDesktop && <span className="contact__email">{contact.email}</span>} {isDesktop && ( <span className="contact__phoneNumber">{contact.phoneNumber}</span> )} </div> </IndividualContactStyled> ); }; export default IndividualContact;

現在， updateMedia function 的報道沒有通過。 我已經做了這個測試，如果它有幫助：

 import IndividualContact from "./IndividualContact"; import { render, screen, waitFor } from "@testing-library/react"; describe("Given a IndividualContact component", () => { describe("When it is instantiated with a contact and in a viewport bigger than 800px", () => { const contact = { name: "Dan", surname: "Abramov", email: "dan@test.com", phoneNumber: "888555222", owner: "owner", }; test("Then it should render the 'email' and the 'phoneNumber' of the contact", async () => { global.innerWidth = 1000; global.dispatchEvent(new Event("resize")); render(<IndividualContact contact={contact} />); await waitFor(() => { expect(screen.getByText("dan@test.com")).toBeInTheDocument(); }); }); }); });

如果有人可以幫助我，我將不勝感激。 謝謝！

Answer 1

您應該首先在 window 上渲染組件並注冊resize事件。 然后更改 window.innerWidth 的值並在window.innerWidth上調度resize事件。

例如

index.tsx ：

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

type Contact = any;
interface ContactProps {
  contact: Contact;
}

const initialState = false;
const IndividualContact = ({ contact }: ContactProps) => {
  const [isDesktop, setIsDesktop] = useState(initialState);

  const updateMedia = () => {
    setIsDesktop(window.innerWidth > 799);
  };

  useEffect(() => {
    window.addEventListener('resize', updateMedia);
    return () => window.removeEventListener('resize', updateMedia);
  });

  return (
    <div>
      {isDesktop && <span className="contact__email">{contact.email}</span>}
      {isDesktop && <span className="contact__phoneNumber">{contact.phoneNumber}</span>}
    </div>
  );
};

export default IndividualContact;

index.test.tsx ：

import IndividualContact from './';
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import React from 'react';

describe('Given a IndividualContact component', () => {
  describe('When it is instantiated with a contact and in a viewport bigger than 800px', () => {
    const contact = {
      name: 'Dan',
      surname: 'Abramov',
      email: 'dan@test.com',
      phoneNumber: '888555222',
      owner: 'owner',
    };

    test("Then it should render the 'email' and the 'phoneNumber' of the contact", async () => {
      render(<IndividualContact contact={contact} />);

      global.innerWidth = 1000;
      act(() => {
        global.dispatchEvent(new Event('resize'));
      });

      await waitFor(() => {
        expect(screen.queryByText('dan@test.com')).toBeInTheDocument();
      });
    });
  });
});

測試結果：

 PASS  stackoverflow/73652164/index.test.tsx (11.685 s)
  Given a IndividualContact component
    When it is instantiated with a contact and in a viewport bigger than 800px
      ✓ Then it should render the 'email' and the 'phoneNumber' of the contact (43 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        12.385 s

package 版本：

"jest": "^26.6.3",
"@testing-library/react": "^11.2.7",
"react": "^16.14.0",