Generate Viewing Key Test

Address.test.tsx

it('can generate a viewing key for a given confidential address', async () => {
  const VIEWING_KEY =
    'm-test-shl-ad14aac56vn5uqh6d27grl778ne8euvgra3jat9tkyhrxnxx3hwtphup4hlwpd02dkut27ygpcaq53'

  const mockImplementation = (address: string): Promise<string> => {
    if (address) {
      return Promise.resolve(VIEWING_KEY)
    }
    return Promise.reject(VIEWING_KEY)
  }

  const mockGetViewingKey = jest.fn(mockImplementation)

  const walletData = {
    wallet: {
      addressBook: {
        [VALID_CONFIDENTIAL_ADDRESS]: 'ok',
      },
    },
  }

  const initialState = {
    walletStatus: 'LOADED' as WalletStatus,
    walletState: {
      getPrivateAccountViewingKey: mockGetViewingKey,
    },
  }

  const addressProps = {
    address: VALID_CONFIDENTIAL_ADDRESS,
    isConfidential: true,
  }

  const {getByTestId} = render(<Address {...addressProps} />, {
    wrapper: createWithProviders(walletData, initialState),
  })

  // Get Generate Viewing Key Button
  await waitFor(() => expect(getByTestId(TESTIDS.viewingKeyBtn)).toBeInTheDocument())
  const generateViewingKeyBtn = getByTestId(TESTIDS.viewingKeyBtn)

  // Click Generate Viewing Key Button
  await act(async () => userEvent.click(generateViewingKeyBtn))
  await waitFor(() => expect(mockGetViewingKey).toHaveBeenCalledWith(VALID_CONFIDENTIAL_ADDRESS))

  // Expect Viewing Key to Render
  await waitFor(() => expect(getByTestId(TESTIDS.viewingKey)).toBeInTheDocument())
})

The request called getPrivateAccountViewingKey is being called from wallet-state.ts and it's of course it is stuck pending because there is no wallet backend running when the tests are run. In this screenshot below, I've pointed out what's happening in the UI and why the test is failing.

Line 44 here: await waitFor(() => expect(mockGetViewingKey).toHaveBeenCalledWith(VALID_CONFIDENTIAL_ADDRESS)) is not being called at all so that means my mocked function isn't being executed even though I'm passing it to the Address component via the initialState object on line 22. During the execution of this test I logged to the console the entire state being passed to Address from the createWithProviders function in test-helpers.tsx to see whether or not my initialState object is being picked up and I don't see it.

I'm not sure how I'm suppose to mock getPrivateAccountViewingKey because it is being called from the actual wallet-state.ts file no matter what I do.