如何在测试文件中呈现条件组件?React测试库

Question

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

// test case fails 
expect(getByText('page loaded')).toBeInTheDocument();

Answer 1

如果您能够模拟加载状态，那么您将只在"；渲染"；您应该测试的部分而不是全部组件逻辑，因为这就是测试库发光发热的方式。

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

test('test page loaded', async () => {
render(<MyComponent />);
expect(await screen.findByText('page loaded')).toBeInTheDocument();
});

但是，您的组件似乎包含一个API请求，所以如果组件接受了一个函数，您可以对其进行模拟并返回值，也可以对fetch进行模拟。以下是你不应该这么做的一些原因。

使用nock或mock-service-worker，您可以拥有一个响应API请求的伪服务器，从而在不模拟任何内部状态的情况下运行组件测试。

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

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