时间戳

首页 > 解决方案 > 如何在我的 React Native 代码上测试更改 UI 的异步操作

javascript - 如何在我的 React Native 代码上测试更改 UI 的异步操作

问题描述

jest我正在使用@testing-library/react-native

代码：

一个按钮点击调度一个功能：

  onPress(_, dispatch) {
      dispatch(getUserAddresses());
    },

这个函数是异步的并且是一个thunk中间件：

export const getUserAddresses = () => async (dispatch) => {
  const res = await retrieveUserAddresses();

  if (res.status === 'success') {
    dispatch(setLocation(res.data));
  }
};

它触发一个 axios 动作：

export const retrieveUserAddresses = async () => {
  const token = await getToken();

  try {
    const res = await instance({
      method: 'GET',
      url: '/addresses',
      headers: { Authorization: `Bearer ${token}` },
    });

    return res.data;
  } catch (error) {
    return error.response;
  }
};

如果响应正常，这将触发此功能：

export const setLocation = (data) => ({
  type: constants.SET_LOCATION,
  data,
});

这最终会将我的减速器上的状态从更改false为true 这将使组件安装或卸载。

在测试方面，当我运行此代码时：

// ...
it('...', () => {
  // ...
    const { getAllByTestId, getByTestId } = render(
      <MockedNavigator component={User} name={USER_ROUTE} />,
    );
     
    // this fire event should click the button that dispatches getUserAddresses();
    fireEvent.press(getAllByTestId('User-option')[1]);
  // ...

});

因为getUserAddresses()当我检查我的组件道具是否为“真”时，该函数是异步的，所以它说它是假的。但是，例如，如果我从这个函数中删除异步内容，它说这是真的，因为我确实单击了调度 getUserAddresses() 函数的按钮。

我已经尝试过使用 MSW，但它在我的原生反应中无法正常工作。（虽然它适用于reactjs）

我该如何测试它？

标签： javascriptreactjsreact-nativeasynchronousjestjs

解决方案

我想到了两种方法来处理它。第一个等待您从第一条评论中获得示例的地方

await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1))

第二个findBy

await screen.findByText('[SOME-TEXT-FROM-USER-COMPONENT]')

或其他一些与之相关的查询是 findBy。

我认为 findBy 应该可以工作，因为您想从 User 组件中查看某些内容，因此您只需从那里搜索某些内容。

编辑：
确保你没有意外地嘲笑任何东西。发生在我和其他人身上的测试很好，但由于模拟它失败了

推荐阅读