Question

我有一个 React 组件，它在 Login_Result 状态不是 fetchUser 之前不会呈现。我的测试失败，因为该组件不是第一次呈现，因此找不到 loading 文本。如何在我的测试中模拟我的 page loaded 以便呈现页面而不是 const [fetchStatusLoading, setFetchStatusLoading] = useState(false) 文本？

loading

const fetchUser = useSelector((state) => (state.fetchUser));

const [fetchStatusLoading, setFetchStatusLoading] = useState(true);

useEffect(() => {
   setFetchStatusLoading(fetchUser .status === 'loading');
}, [fetchStatusLoading, fetch.status]);

useEffect(() => {
        // this is a redux thunk dispatch that sets fetch.status to loading/succeeded 
        dispatch(fetchAPI({ username })); 
}, []);

if(fetchStatusLoading) return 'loading..'; 
return (<>page loaded</>)

Answer 1

如果您能够模拟加载状态，您将只测试“渲染”部分的代码，而不是您应该测试的所有组件逻辑，因为这是测试库的意义所在。

>

如果这只是一个异步问题，您可以执行以下操作：

test('test page loaded', async () => {
  render(<MyComponent />);

  expect(await screen.findByText('page loaded')).toBeInTheDocument();
});

但是您的组件似乎包含一个 API 请求，因此如果该组件接受一个函数，您可以模拟它并返回值，或者您可以模拟 fetch。 Here are some reasons why you should not do that。

使用 nock 或 mock-service-worker，您可以拥有一个虚假服务器来响应您的 API 请求，从而运行您的组件测试，而无需模拟任何内部状态。

测试库只是在类似浏览器的环境中渲染组件，不提供 API 来修改任何道具或状态。它是为此目的而创建的，与 Enzyme 相反，它提供了一个 API 来访问组件 props 和 state。

看看这个类似的问题：check state of a component using react testing library

如何在测试文件中呈现条件组件？反应测试库

1 个答案: