用 Next.js 进行单元测试时，遇到的坑和解决方案

在前端开发中，单元测试是不可缺少的一环。而 Next.js 作为一个基于 React 的聚合框架，也为我们提供了一套便捷的单元测试解决方案。但是在实践中，我们常常会遇到一些坑。下面就让我们针对这些坑来总结一下解决方案。

坑一： Next.js 应用的初始化

Next.js 应用有一个很特别的地方，就是它需要在客户端和服务端同时运行，这就对我们在进行单元测试时，会产生一些额外的麻烦。因为在单元测试的时候，我们只是在 Node.js 的环境下运行测试脚本，而无法触发 Next.js 服务器启动流程。但是，我们可以通过 next-test-utils 单元测试工具包来解决这个问题。

代码示例：

// javascriptcn.com 代码示例
import { listen } from 'next-test-utils';
import { createServer } from 'http';
import { join } from 'path';
import { parse } from 'url';

describe('API test', () => {
  let server;

  beforeAll(async () => {
    const dir = join(__dirname, '..');
    const app = require(dir).default;

    server = createServer((req, res) => {
      const parsedUrl = parse(req.url, true);
      app.render(req, res, parsedUrl.pathname, parsedUrl.query);
    });

    await listen(server, 3001);
  });

  it('should return 200 OK', async () => {
    const res = await fetch('http://localhost:3001/api/hello');
    expect(res.status).toBe(200);
  });

  afterAll((done) => {
    server.close(done);
  });
});

坑二： 测试模拟

在进行单元测试的时候，我们可能需要模拟一些异步请求、定时器、文件操作等等。同时，我们还要考虑服务端渲染的问题。这些问题都可以通过使用 Jest 的 mocking 功能来解决。

代码示例：

// javascriptcn.com 代码示例
import fetch from 'isomorphic-unfetch';

jest.mock('isomorphic-unfetch');

describe('API test', () => {
  beforeAll(() => {
    fetch.mockImplementation(async (url) => {
      switch (url) {
        case 'http://localhost:3001/api/hello':
          return { status: 200, text: () => Promise.resolve('Hello World!') };
        default:
          return Promise.reject(new Error(`Invalid URL: ${url}`));
      }
    });
  });

  it('should return "Hello World!"', async () => {
    const res = await fetch('http://localhost:3001/api/hello');
    const result = await res.text();
    expect(result).toBe('Hello World!');
  });

  afterAll(() => {
    jest.restoreAllMocks();
  });
});

坑三： React 组件测试

Next.js 的核心就是 React，因此在进行单元测试时，React 组件的测试也是不可或缺的。我们可以使用 @testing-library/react 和 @testing-library/user-event 分别进行组件渲染和交互测试。同时，我们还需要 mock 掉 Next.js 提供的 React hook 。

代码示例：

// javascriptcn.com 代码示例
import { render, screen, userEvent } from '@testing-library/react';

jest.mock('next/router', () => ({
  useRouter: () => ({
    push: jest.fn(),
  }),
}));
jest.mock('../hooks/useCart', () => ({
  useCart: () => ({
    cartItems: [],
    addItem: jest.fn(),
  }),
}));

import { ProductCard } from '../../components/ProductCard';

describe('ProductCard component', () => {
  const product = {
    id: '1',
    name: 'test product',
    price: 100,
    imageUrl: '/test.png',
  };

  it('should render correctly', async () => {
    render(<ProductCard product={product} />);

    expect(screen.getByRole('img')).toHaveAttribute('src', '/test.png');
    expect(screen.getByText('test product')).toBeInTheDocument();
    expect(screen.getByText('$100.00')).toBeInTheDocument();
  });

  it('should add item to cart', async () => {
    render(<ProductCard product={product} />);

    userEvent.click(screen.getByTestId('add-to-cart-button'));

    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByTestId('cart-icon')).toHaveClass('filled');
  });
});

总结

本文介绍了 Next.js 应用进行单元测试时可能遇到的一些问题以及解决方案，包括 Next.js 应用的初始化、测试模拟和 React 组件测试等。如果你还没有进行单元测试，那么不妨从你的 Next.js 项目开始吧。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65840258d2f5e1655decba67