3

使用 React 测试库运行代码覆盖率测试时出现错误。我相信我收到了错误，因为在我的组件中触发状态更新之前我的测试正在卸载。

  const {
    personSuccessAlert,
    setPersonSuccessAlert,
    updatePersonSuccessAlert,
    setUpdatePersonSuccessAlert,
  } = useContext(PeopleContext);

  useEffect(() => {
    setTimeout(() => {
      setPersonSuccessAlert(false);
      setUpdatePersonSuccessAlert(false);
    }, 3000);
  }, [peopleData, updatePersonSuccessAlert]);

我的 useEffect 有 3 秒超时，然后调用两个函数将更新上下文中的状态。

import React, { createContext, useState } from 'react';

export const PeopleContext = createContext();

const PeopleContextProvider = ({
  children,
  initialPersonSuccessAlert = false,
  initialEditSuccessAlert = false,
}) => {
  const [personSuccessAlert, setPersonSuccessAlert] = useState(
    initialPersonSuccessAlert,
  );
  const [updatePersonSuccessAlert, setUpdatePersonSuccessAlert] = useState(
    initialEditSuccessAlert,
  );

  return (
    <PeopleContext.Provider
      value={{
        personSuccessAlert,
        updatePersonSuccessAlert,
        setPersonSuccessAlert,
        setUpdatePersonSuccessAlert,
      }}>
      {children}
    </PeopleContext.Provider>
  );
};

export default PeopleContextProvider;

我试图弄清楚如何模拟这两个函数或让我的测试安装足够长的时间来更新状态。

这是我正在尝试的

  test('onClick of person name to route to person record view loading for person record', async () => {
    const history = createMemoryHistory();
    history.push('/people');
    const providerProps = { personSuccessAlert: true };
    const { getByText } = render(
      <MockedProvider mocks={getPeople} addTypename={false}>
        <PeopleContextProvider {...providerProps}>
          <Router history={history}>
            <Switch>
              <Route exact path="/people" component={People} />
              <Route path="/people/:id" component={PersonRecord} />
            </Switch>
          </Router>
        </PeopleContextProvider>
      </MockedProvider>,
    );
    expect(getByText('Loading')).toBeInTheDocument();  
    await act(async () => new Promise((resolve) => setTimeout(resolve, 3500)));
  });

我试过设置const setPersonSuccessAlert = jest.fn();，但没有找到成功。

任何想法如何保持我的组件安装？

4

0 回答 0