使用Jest测试componentDidMount时，Promise中this指向undefined问题求助

我来帮你搞定这个问题！你遇到的this变成undefined的情况，虽然你已经用了箭头函数（按说应该绑定组件实例的this），但大概率是Jest测试的异步特性导致的——测试代码没等Promise回调执行完就结束了，或者组件实例的上下文在异步回调执行时丢失了。下面给你几个靠谱的解决方案：

原因分析 #

你的组件代码本身用箭头函数是正确的，箭头函数会捕获当前上下文的this（也就是组件实例）。但在Jest测试中，Promise的回调属于异步任务，默认测试会跑完同步代码就结束，不会等待异步回调执行，这就导致回调触发时，要么组件实例已经被销毁，要么this的绑定关系失效，所以才会出现undefined的情况。

解决方案 #

1. 测试中用async/await等待异步操作完成 #

这是最常见也最推荐的解决方式，核心是让测试代码等待Promise的回调执行完毕。

首先，先mock你的myHttpService，模拟接口返回：

// 假设你的service路径是../services/myHttpService
jest.mock('../services/myHttpService', () => ({
  getUser: jest.fn().mockResolvedValue({ user: { id: '123', name: 'Shawn' } })
}));

然后编写异步测试：

import React from 'react';
import { shallow } from 'enzyme'; // 或者用react-testing-library
import App from './App';
import myHttpService from '../services/myHttpService';

test('componentDidMount成功获取用户并更新state', async () => {
  // 模拟history的push方法
  const mockHistory = { push: jest.fn() };
  const wrapper = shallow(<App userId="123" history={mockHistory} />);

  // 等待所有异步微任务执行完成（也就是Promise的回调）
  await Promise.resolve();

  // 验证接口调用是否正确
  expect(myHttpService.getUser).toHaveBeenCalledWith('123');
  // 验证state是否更新
  expect(wrapper.state('user')).toEqual({ id: '123', name: 'Shawn' });
});

如果是用react-testing-library，写法类似，只是获取组件实例的方式不同：

import { render, waitFor, screen } from '@testing-library/react';

test('componentDidMount成功获取用户', async () => {
  const mockHistory = { push: jest.fn() };
  render(<App userId="123" history={mockHistory} />);

  // 等待异步操作完成并验证UI变化（比如用户名称显示）
  await waitFor(() => {
    expect(screen.getByText('Shawn')).toBeInTheDocument();
  });
});

2. 改用async/await重构componentDidMount #

把componentDidMount改成异步函数，减少回调嵌套，代码更清晰，也能避免一些潜在的绑定问题：

async componentDidMount() {
  try {
    const response = await myHttpService.getUser(this.props.userId);
    if (response.user !== null) {
      this.setState({ user: response.user });
    } else {
      this.props.history.push('/login');
    }
  } catch (error) {
    // 这里可以处理接口请求失败的情况，比如提示用户
    console.error('获取用户信息失败:', error);
  }
}

这种写法下，测试同样需要用async/await来等待异步操作完成。

3. 备选：手动绑定this（不推荐） #

如果你因为某些原因不想用箭头函数或async/await，也可以手动用.bind(this)来绑定回调的上下文：

componentDidMount() {
  myHttpService.getUser(this.props.userId)
    .then(function(response) {
      if (response.user !== null) {
        this.setState({ user: response.user });
      } else {
        this.props.history.push('/login');
      }
    }.bind(this)); // 手动绑定组件实例的this
}

不过这种写法不如箭头函数简洁，所以更推荐前面两种方案。

内容的提问来源于stack exchange，提问作者Shawn