xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

jest all in one

jest all in one

ES Modules & TypeScript & React

https://github.com/xgqfrms/FEAT/tree/master/jest

ES Modules

babel

$ yarn add -D babel-jest @babel/core @babel/preset-env

https://babeljs.io/docs/en/

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

jest 23

TypeScript

$ yarn add -D @babel/preset-typescript

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
  ],
};

React

https://jestjs.io/docs/en/tutorial-react

https://create-react-app.dev/

# create-react-app
$ yarn add -D react-test-renderer

# manual
$ yarn add -D jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};
// package.json
  "dependencies": {
    "react": "<current-version>",
    "react-dom": "<current-version>"
  },
  "devDependencies": {
    "@babel/preset-env": "<current-version>",
    "@babel/preset-react": "<current-version>",
    "babel-jest": "<current-version>",
    "jest": "<current-version>",
    "react-test-renderer": "<current-version>"
  },
  "scripts": {
    "test": "jest"
  }

refs

https://jestjs.io/docs/en/getting-started#using-babel

https://github.com/facebook/jest/issues/8133#issuecomment-473792563

https://github.com/xgqfrms/FEAT/issues/1

webpack

https://jestjs.io/docs/en/webpack

parcel

https://parceljs.org/getting_started.html



©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


posted @   xgqfrms  阅读(111)  评论(4编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2019-08-24 CSS & re-layout & re-paint & composite
2019-08-24 webpack code splitting
2019-08-24 代码整洁之道
2019-08-24 js 数据双向绑定原理 All In One
2019-08-24 垃圾平安 All In One
2018-08-24 MarkMan & UI
2018-08-24 React & SSR & webpack
点击右上角即可分享
微信分享提示