运行单元测试时，在useEffect钩子中反应useState钩子没有设置state

Question

I am learning React and am now trying out unit testing. I have login functional component with this following code fragment:

const [users, setUsers] = useState<User[]>([]);

useEffect(() => {
  usersService.getUsers().then((allUsers: User[]) => {
    setUsers(allUsers);
  });
}, []); // eslint-disable-line react-hooks/exhaustive-deps

It all works just fine when I run the app. However, when I try to run the test for this, it does not set the users to state. Here is a mock and a test that I wrote:

const usersServiceMock: UsersService = {
  getUsers: (): Promise<User[]> => {
    return new Promise((resolve) => {
      process.nextTick(() =>
        resolve([{ username: 'test', password: 'test', imageUrl: '', id: 0 } as User])
      );
    });
  },
} as UsersService;

it('logs user in', async () => {
  const loginSpy = jest.spyOn(loginServiceMock, 'logUserIn');
  const usersSpy = jest.spyOn(usersServiceMock, 'getUsers');

  const component = render(
    <Login loginService={loginServiceMock} usersService={usersServiceMock} />
  );

  expect(usersSpy).toHaveBeenCalledTimes(1);
  //up until here, test is fine, but users are not set inside component  
});

Mock service is provided properly and mocked user data is properly resolved but setUsers(allUsers) does not actually set it with tests. Inside the effect, usersService.getUsers() does get mocked data but it never sets it.

const [users, setUsers] = useState<User[]>([]);

useEffect(() => {
  usersService.getUsers().then((allUsers: User[]) => {
    // allUsers value is [{ username: 'test', password: 'test', imageUrl: '', id: 0}]        
    setUsers(allUsers);
    // users value is []
  });
}, []); // eslint-disable-line react-hooks/exhaustive-deps

Here is function that uses the state. It works when running the app, but when running tests, users is still empty array.

const login = (): void => {
const userFromDb = users.find((u) => u.username === user.username);
if (!userFromDb || userFromDb.password !== user.password) {
  setUser({
    username: '',
    password: '',
    imageUrl: '',
  });
  setIsDialogOpen(true);
 } else {
  loginService.logUserIn(userFromDb);
  history.push('/home');
 }
};

Any ides?

Answer 1

setState does not change the local variable (this is impossible in js, especially when using const). It just ensures that calling the useState in the next render will return the new value.

• If you need the new value where you set it, jus use the same variable (allUsers).
• If you need the new value elsewhere, you will see it in the state variable (users).