Jest测试React Hooks的useEffect

useEffect 是 React Hooks 中的一个关键功能，它允许我们在函数组件中处理副作用，如数据获取、订阅或手动更改 DOM

以下是使用 Jest 和 React Testing Library 测试使用 useEffect 的 React 函数组件的示例：

1. 首先，创建一个名为 MyComponent.js 的文件，其中包含使用 useEffect 的简单组件：

import React, { useState, useEffect } from 'react'; const MyComponent = () => { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); return ( <div> {data ? <div>Data: {JSON.stringify(data)}</div> : <div>Loading...</div>} </div> );
}; export default MyComponent;

1. 然后，创建一个名为 MyComponent.test.js 的测试文件：

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent'; // Mock the fetch functionglobal.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve({ id: 1, title: 'Test Data' }),
  })
); describe('MyComponent', () => { it('fetches and displays data on mount', async () => { render(<MyComponent />); // Expect to see the loading message expect(screen.getByText('Loading...')).toBeInTheDocument(); // Wait for the data to be fetched and displayed await waitFor(() => screen.getByText(/Data:/i)); // Expect to see the fetched data expect(screen.getByText(/Data:.*"id": 1/)).toBeInTheDocument(); expect(screen.getByText(/Data:.*"title": "Test Data"/)).toBeInTheDocument();
  });
});

在这个例子中，我们使用了 Jest 的 jest.fn() 方法来模拟 fetch 函数。我们还使用了 @testing-library/react 的 render、screen 和 waitFor 函数来渲染组件并等待异步操作完成。最后，我们使用 expect 和 toBeInTheDocument 断言来验证组件的行为。

要运行此测试，请确保已安装所需的依赖项（如 jest、@testing-library/react 和 @testing-library/user-event），并在项目根目录中运行 npm test 或 yarn test。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo6@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。