如何测试在 useEffect 钩子中调用的函数

Question

我有一个函数在useEffect内部调用，我无法将覆盖率传递给它。对于渲染html，该函数根据视口宽度更改状态的值。基本上我做一个条件渲染。这是函数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函数没有通过覆盖范围。我做了这个测试，如果有帮助的话：

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: "[e-mail]",
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("[e-mail]")).toBeInTheDocument();
});
});
});
});

如果有人能帮助我，我将不胜感激。谢谢

Answer 1

您应该首先渲染组件并在窗口上注册resize事件。然后更改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: '[e-mail]',
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('[e-mail]')).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

软件包版本：

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