使用 Typescript、Jest 和 React 测试库设置 Next.js

2025-06-09

使用 Typescript、Jest 和 React 测试库设置 Next.js

为什么？

Next.js是一个超酷的 React 框架，它能为你带来卓越的开发者体验。在本期节目中，我将向你展示如何使用 Typescript、Jest 和 React 测试库来设置它。

设置

要设置项目，我们需要遵循以下步骤：

  • 要创建下一个应用程序，请从终端运行
npx create-next-app
Enter fullscreen mode Exit fullscreen mode
  • 安装 typescript 以及 react 和 node 类型
npm install typescript @types/react @types/node -D
Enter fullscreen mode Exit fullscreen mode
  • 安装 jest、react 测试库、babel-jest、@testing-library/jest-dom 和 jest 类型
npm i jest @testing-library/react @types/jest babel-jest @testing-library/jest-dom @testing-library/user-event @testing-library/dom -D
Enter fullscreen mode Exit fullscreen mode
  • 为 typescript 和 babel 创建配置文件
touch tsconfig.json
touch .babelrc
Enter fullscreen mode Exit fullscreen mode
  • 添加到 babel 配置文件
{
  "presets": ["next/babel"]
}
Enter fullscreen mode Exit fullscreen mode
  • 创建jest.config.js和jest.setup.ts文件
// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
};
Enter fullscreen mode Exit fullscreen mode 
// jest.setup.ts
import '@testing-library/jest-dom';
Enter fullscreen mode Exit fullscreen mode
  • 启动应用程序以便接下来可以配置 typescript
npm run dev
Enter fullscreen mode Exit fullscreen mode

奖金

如果您要使用 CSS 模块，请确保还包含以下步骤：

npm i identity-obj-proxy -D
Enter fullscreen mode Exit fullscreen mode
  • 更新jest.config.js文件使其看起来像这样
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  moduleNameMapper: {
    '\\.(scss|sass|css)$': 'identity-obj-proxy',
  },
};
Enter fullscreen mode Exit fullscreen mode

现在我们已经准备好了，您可以开始将您的组件从.js更改为.tsx并构建您的精彩应用程序。

鏂囩珷鏉ユ簮锛�https://dev.to/maciekgrzybek/setup-next-js-with-typescript-jest-and-react-testing-library-28g5
Devto 翻译
PREV
如何从头开始使用 Webpack & Friends 配置 React 祝你有美好的一天😃！。
NEXT
使用 React 和 Intersection Observer 创建部分导航 使用 React 和 Intersection Observer 创建部分导航