Как написать jest unit-тест, используя функцию gatsby.navigate?

Question

Evening all,

Я создаю приложение только для клиентской части с Gatsby.

Я пытаюсь написать некоторые модульные тесты для моего <Login /> компонента.

Как только пользователь успешно вошел в систему, он перенаправляется в / app /, программно через навигационную функцию Гэтсби

Это мой тест до сих пор:

import React from 'react'
import userEvent from '@testing-library/user-event'
import 'jest-dom/extend-expect'
import { navigate } from 'gatsby'
import {
    render,
    fireEvent,
    cleanup,
    act,
    wait
} from '~/__tests__/utils/wrapper'
import Login from '../index'

describe('<Login />', () => {

    afterEach(cleanup)

    it('should redirect to /app/ when the correct details are used', async () => {
        const { getByTestId, getByLabelText } = render(<Login />)
        const emailField = getByLabelText('Email address')
        const passwordField = getByTestId('password-input')

        act(() => {
            userEvent.type(emailField, 'test@email.com')
            userEvent.type(passwordField, 'password')
        })

        await wait()

        act(() => {
            fireEvent.click(getByTestId('login-submit'))
        })

        await wait()

        expect(navigate).toHaveBeenCalledTimes(1) // FAILS
        expect(navigate).toHaveBeenCalledWith('/app/') // FAILS
    })
})

Я следовал здесь документам: https://www.gatsbyjs.org/docs/unit-testing/#3-useful-mocks-to-complete-your-testing-environment

Я также добавил navigate: jest.fn() к экспортированному объекту.

Компонент работает, так что это определенно связано с моим тестом.

Любойпомощь, очень признателен

Answer 1

См. Документацию здесь:

https://testing -library.com / docs / example-reach-router

Теперь я завернул компонент так

function renderWithRouter(
    ui,
    { route = '/', history = createHistory(createMemorySource(route)) } = {}
) {
    return {
        ...render(<LocationProvider history={history}>{ui}</LocationProvider>),
        // adding `history` to the returned utilities to allow us
        // to reference it in our tests (just try to avoid using
        // this to test implementation details).
        history
    }
}

Также ...

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-link/src/tests/index.js

для дальнейших идей