React Enzyme中useEffect异步请求完成后测试Dropdown的方法

问题根源 #

• 组件初始loading状态为true，下拉菜单仅在loading切换为false后才会渲染
• 测试执行时，useEffect内的异步API调用还未完成，loading状态未更新，导致找不到下拉节点
• 现有测试的下拉选择器写法错误：你用了#dropdown（id选择器），但组件内下拉仅定义了data-test="dropdown"属性，没有对应id

解决方案 #

1. 给下拉测试块添加moxios配置 #

和API测试块一样，先安装/卸载moxios，同时mock组件内调用的两个API的返回值，结构要和组件逻辑匹配，避免执行时报错。

2. 等待异步请求全部完成后再操作节点 #

用moxios.wait等待所有pending请求处理完成，配合act包裹更新逻辑，确保React状态更新全部落地后再查找节点。

3. 修正下拉选择器 #

用data-test属性查找节点，或者直接用你封装的findByTestAttr工具函数。

完整修改后的下拉测试代码 #

describe('test the dropdown', () => {
  beforeEach(() => {
    moxios.install()
  })

  afterEach(() => {
    moxios.uninstall()
  })

  test("Select a value from dropdown", (done) => {
    // Mock 两个接口的返回，结构和组件逻辑匹配
    const currentPriceApi = 'https://api.coindesk.com/v1/bpi/currentprice/USD.json'
    const chartApi = 'https://api.coindesk.com/v1/bpi/historical/close.json?USD.json'
    
    moxios.stubRequest(currentPriceApi, {
      status: 200,
      response: {
        bpi: {
          USD: {
            code: 'USD',
            rate: '20000'
          }
        }
      }
    })
    moxios.stubRequest(chartApi, {
      status: 200,
      response: {
        bpi: {
          '2023-01-01': 20000,
          '2023-01-02': 21000
        }
      }
    })

    let wrapper;
    act(() => {
      wrapper = setup();
    })

    // 等待所有异步请求处理完成
    moxios.wait(() => {
      // 同步组件最新状态
      wrapper.update();
      // 用data-test属性查找下拉，或者用findByTestAttr(wrapper, 'dropdown')
      const dropdown = wrapper.find('[data-test="dropdown"]');
      expect(dropdown.length).toBe(1);

      // 模拟change事件
      dropdown.simulate('change', { target: { value: 'EUR', name: 'EUR' } })
      wrapper.update();
      
      done();
    });
  });
})

额外说明 #

如果需要测试切换货币后的逻辑，对应切换后的EUR的接口也需要提前mock对应返回值，避免异步报错。

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