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

Question

我有一个 React 组件，它在fetchUser status is not 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</>) 

// test case fails 

  expect(getByText('page loaded')).toBeInTheDocument();

Answer 1

如果您能够模拟加载 state 您将只测试“渲染”部分上的代码，而不是您应该测试的所有组件逻辑，因为这是测试库意味着发光的方式。

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

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

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

但是您的组件似乎包含一个 API 请求，因此如果该组件接受 function 您可以模拟它并返回值，或者您可以模拟提取。 以下是您不应该这样做的一些原因。

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

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

查看这个类似的问题： 使用反应测试库检查组件的 state