如何使用 gatsby.navigate 函数编写一个有趣的单元测试？答案

【问题标题】：How to write a jest unit-test using the gatsby.navigate function?如何使用 gatsby.navigate 函数编写一个有趣的单元测试？
【发布时间】：2019-07-08 18:35:51
【问题描述】：

晚上好，

我正在使用 Gatsby 构建一个仅限客户端的应用程序。

我正在尝试为我的<Login /> 组件编写一些单元测试。

一旦用户成功登录，他们将被重定向到 /app/，以编程方式通过 gatsby 的导航功能

这是我迄今为止的测试：

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()。

该组件正在工作，所以它肯定与我的测试有关。

任何帮助，不胜感激

【问题讨论】：

标签： reactjs unit-testing jestjs gatsby react-testing-library

【解决方案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

更多想法

【讨论】：

【解决方案2】：

在项目的根目录中（/src 之外），您应该添加__mocks__/gatsby.js。

您可以在此处模拟 gatsby 函数，包括 navigate。

一个例子：

// __mocks__/gatsby.js
const gatsby = jest.requireActual('gatsby');

module.exports = {
  ...gatsby,
  navigate: jest.fn(),
}

在您的测试中，您需要告诉 jest 将此模拟与 jest.mock('gatsby'); 一起使用。

或者，您可以在测试文件中模拟：

// __tests__/Component.jsx
jest.mock('gatsby', () => {
  const gatsby = jest.requireActual('gatsby');

  return {
    ...gatsby,
    navigate: jest.fn(),
  }
});

【讨论】：