正文

ava 类似jest snapshot 功能试用

IP云
IP云V管理员/3 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

ava也提供了类似jest 的snapshot 测试，可以用来方便的测试web 组件，以下是一个简单的试用，
同时包含了自己碰到问题，以及解决方法，以及一些参考链接

使用typescript 以及tsx，测试react 组件

环境准备
  • 项目结构 
├── package.json
├── src
│ ├── app.ts
│ ├── hello-component.tsx
│ └── userlogin.tsx
├── tests
│ ├── app.js
│ ├── hello-component.js
│ └── userlogin.js
├── tsconfig.json
└── yarn.lock
  • 代码说明
    src 为typescript 代码，tests 为集成ava 测试
    package.json 包含ava 的一些配置,项目依赖,以及npm script 
{
  "name": "@rongfengliang/ava-test-learning",
  "version": "1.0.1",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-react": "^7.6.3",
    "@babel/register": "^7.6.2",
    "@types/react": "^16.9.11",
    "ava": "^2.4.0",
    "react": "^16.11.0",
    "react-test-renderer": "^16.11.0",
    "typescript": "^3.6.4",
    "zen-observable": "^0.8.14"
  },
  "ava": {
    "require": [
      "@babel/register",
      "@babel/polyfill"
    ]
  },
  "scripts": {
    "test:live": "ava -v -w",
    "test": "ava -v",
    "build:live": "tsc --watch"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  }
}

tsconfig.json 文件定义 

{
  "compilerOptions": {
    "target": "es5",                           
    "module": "umd",                     
    "declaration": true,                   
    "outDir": "libs",                       
    "rootDir": "src",
    "jsx": "react",
    "removeComments": false,
    "strict": true,
    "moduleResolution": "node"
  }
} 

src/app.js 可选 ，一个简单的module 

// define user entity
let user = {
   /** user name */
   name:"dalong",
   /** user age */
   age:33
}
// for export default
export default {
   user
}
export {
   user
}

src/hello-component.tsx 一个测试组件 

import React = require("react");
const HelloWorld = () => <h1>Hello World...!</h1>;
export default HelloWorld;

src/userlogin.tsx 另外一个测试组件 

import React = require("react");
​
/**
 * loginForm component
 */
const LoginForm = ()=> 
  <div>
      <h1>userename </h1>
      <input placeholder="please input your name" />
      <h1>pasword</h1>
  </div>
export default LoginForm;

tests/hello-component.js snapshot 测试,userlogin.js 类似
babel 配置，为了简单使用6的格式,进行react 的处理，vue 也类似的 

{
    "presets": ["@babel/preset-react"]
}

启动&&测试
  • 启动实时编译 
yarn build:live
  • 启动测试 
yarn test:live
  • 效果

修改组件，查看snapshot
src/hello-component.tsx 

import React = require("react");
const HelloWorld = () => <h1>dalong World...!</h1>;
export default HelloWorld;

几个问题
  • 新版本的变动
    新版本为了支持babel 7 ava 做了好多修改
    比如package.json 中关于ava 的配置以及依赖的preset 
 "ava": {
    "require": [
      "@babel/register",
      "@babel/polyfill"
    ]
  }
  • regeneratorRuntime is not defined
    添加@babel/polyfill

说明

以上是一个简单的试用，还是得多看看github issue

参考资料

https://github.com/avajs/ava/issues/1640
https://github.com/avajs/ava/issues/1968
https://github.com/avajs/ava/issues/685
https://github.com/rongfengliang/ava-test-learning

相关阅读

目录[+]