Password Generator using Best Practices in React/TypeScript/Jest/Redux

What are you most proud of, and what would you do differently next time?

Using Single Responsibility Principle. At least for all UI-components (atoms and containers). In case of some custom hooks I'm not sure.

What challenges did you encounter, and how did you overcome them?

Building a custom SliderBar. I never did that before. I programmed it step by step: first Layout (background,value,adjuster,container); than user interaction(Click,KeyDown,KeyUp,MouseDown,MouseMove,MouseUp); after that storage logic.

What specific areas of your project would you like help with?

I want to know how to test an Error that is thrown in an async hook in jest.

I tried this and the error is thrown succesfully, but act() did not pass the error to expect(), so the test fails:

  it("throws an error if copy to clipboard fails", async (): 
    setup({ password: "testPassword" });

    const element: HTMLElement = screen.getByTestId(testComponentDataTestId);

    expect(
      async () =>
        await act(async () => {
          fireEvent.click(element);
        }),
    ).toThrow(new Error(ERROR_MESSAGE_PASSWORD_COPY_PREFIX));
  });

As a workaround I changed that Error to a console.error, so I could spy on it and check if it was called. So this works, but I would prefer to throw an error at this point:

  it("throws an error if copy to clipboard fails", async (): Promise<void> => {
    setup({ password: "testPassword" });

    const element: HTMLElement = screen.getByTestId(testComponentDataTestId);
    await act(async (): Promise<void> => {
      fireEvent.click(element);
    });

    expect(console.error).toHaveBeenCalledTimes(1);
    expect(console.error).toHaveBeenCalledWith(
      ERROR_MESSAGE_PASSWORD_COPY_PREFIX + errorMessage,
    );

Thanks for any help. :)