首页 > 其他分享 >TS + Webpack 整合 Jest

TS + Webpack 整合 Jest

时间:2024-05-30 22:46:15浏览次数:19  
标签:文件 Jest json TS ts Webpack jest test

  1. 安装 Jest 和相关依赖

    首先,安装 Jest 和 TypeScript 的 Jest 预处理器ts-jest以及类型定义文件。

    npm install --save-dev jest ts-jest @types/jest
    
  2. 初始化 Jest 配置

    使用ts-jest初始化 Jest 配置文件。

    npx ts-jest config:init
    

    这会生成一个基本的 Jest 配置文件jest.config.js。如果没有生成,手动创建该文件并添加以下内容:

    module.exports = {
      preset: 'ts-jest',
      testEnvironment: 'node',
      moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
      transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest',
      },
      testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
    };
    
  3. 配置 TypeScript

    确保你的tsconfig.json文件包含jest的类型定义:

    {
      "compilerOptions": {
        "types": ["jest"]
      }
    }
    
  4. 编写测试

    在你的项目中编写测试文件,通常放在__tests__目录或者与源文件同名但以.test.ts.spec.ts结尾。例如,在src目录下创建example.test.ts

    // src/example.test.ts
    import { myFunction } from './example';
    
    test('myFunction should return correct value', () => {
      expect(myFunction(1)).toBe(2);
    });
    

    注意,要将测试文件或文件所在目录放在tsconfig.json中指定的compilerOptions.rootDir下,不然会报Unable to process '...__tests__\utils.test.ts'之类的错误。

  5. 更新 npm 脚本

    package.json中添加一个脚本来运行 Jest:

    {
      "scripts": {
        "test": "jest"
      }
    }
    
  6. 配置 ESLint

    如果项目中使用了 ESLint,可能会提示 test 等函数未定义(no-undef),将下面的overrides配置加到.eslintrc.js中可以解决:

    {
       "overrides": [
           {
               "files": ["**/?(*.)+(spec|test).[tj]s?(x)"],
               "env": {
                   "jest": true
               }
           }
       ]
    }
    
  7. 运行测试

    运行以下命令来执行测试:

    npm test
    

参考:ChatGPT、javascript - eslint throws `no-undef` errors when linting Jest test files - Stack Overflow

标签:文件,Jest,json,TS,ts,Webpack,jest,test
From: https://www.cnblogs.com/Higurashi-kagome/p/18223380

相关文章

  • QNX-9—QNX官网文档翻译—Interrupts
    https://www.qnx.com/developers/docs/7.1/index.html#com.qnx.doc.neutrino.getting_started/topic/s1_inter.html前言:在本章中,我们将了解中断、如何在QNXNeutrino下处理中断、中断对调度和实时性的影响以及一些中断管理策略。QNXNeutrino和中断我们需要问的第一件事是“......
  • amCharts绘制关联饼图
    案例1代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/percent.js"></script><scri......
  • 论文阅读笔记(十)——CRISPR-GPT: An LLM Agent for Automated Design of Gene-Editin
    论文阅读笔记(十)——CRISPR-GPT:AnLLMAgentforAutomatedDesignofGene-EditingExperiments目录论文阅读笔记(十)——CRISPR-GPT:AnLLMAgentforAutomatedDesignofGene-EditingExperimentsAbstract简介名词解释问题CRISPR-GPT概述MethodToolProvider......
  • amCharts绘制甜甜圈
    案例1代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/percent.js"></script><scri......
  • 基于MCTS的三维四子棋AI模拟和基于PyQt5的应用交互界面
    '''三维四子棋是在三维空间率先四子连珠的游戏,在传统五子棋基本被研究透的情况下,三维四子棋增加了规则和难度,更加考验计算力、空间感、观察力和想象力。本模块实现三维四子棋的GUI。仅供学习和参考。BySoulCheungOnMay28thEmail:[email protected]:1594983583'''......
  • amCharts绘制饼图
    案例1代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/percent.js"></script><scri......
  • amCharts绘制带趋势线折线图
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • 【已解决】Swagger配置问题—Failed to start bean ‘documentationPluginsBootstrapp
    项目场景:swagger-demo编写SwaggerConfig.java后运行SwaggerDemoApplication.java不能成功问题描述ErrorstartingApplicationContext.Todisplaytheconditionsreportre-runyourapplicationwith'debug'enabled.org.springframework.context.ApplicationCont......
  • amCharts绘制折线图尾部动画
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts绘制折线图和柱状图混合
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......