设置本地存储以测试使用jest的React

要设置本地存储以测试使用Jest的React，可以使用localStorage对象来模拟浏览器的本地存储。以下是一个示例解决方案：

首先，创建一个localStorage.js文件，将以下代码添加到文件中：

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  removeItem: jest.fn(),
  clear: jest.fn()
};

global.localStorage = localStorageMock;

然后，在你的测试文件中，将localStorage.js导入：

import './localStorage';

// 你的测试代码

现在，你可以使用localStorage对象进行测试。例如，假设你有一个使用本地存储的组件，你可以编写以下测试：

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

describe('MyComponent', () => {
  test('renders with localStorage value', () => {
    const testValue = 'test value';
    localStorage.getItem.mockReturnValue(testValue);

    render(<MyComponent />);

    expect(screen.getByText(testValue)).toBeInTheDocument();
  });

  test('sets localStorage value on button click', () => {
    render(<MyComponent />);

    const testValue = 'test value';
    const input = screen.getByLabelText('Input');
    const button = screen.getByText('Set Value');

    // 模拟用户输入
    fireEvent.change(input, { target: { value: testValue } });
    fireEvent.click(button);

    expect(localStorage.setItem).toHaveBeenCalledWith('myKey', testValue);
  });
});

在上面的示例中，我们使用localStorage.getItem.mockReturnValue(testValue)来模拟从本地存储中获取值，并使用localStorage.setItem来模拟在按钮点击时设置值。