【从Jest入门到 TDD,BDD双实战】Jest 前端自动化测试框架基础入门②

一:前端自动化测试产生的背景及原理

【从Jest入门到 TDD,BDD双实战】Jest 前端自动化测试框架基础入门②_第1张图片

二:构建基础结构

1.创建文件夹
2.创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>math.js</title>
  <script src="math.js"></script>
</head>
<body>
  
</body>
</html>

3.创建math.js

function add(a,b){
  return a+b;
}

function minus(a,b){
  return a-b;
}

4.创建math.test.js

function expect(res){
  return {
    toBe(actual){
      if(res!= actual){
        throw new Error(`期望值和实际值不符,期望是${actual},实际是${res}`)
      }
    }
  }
}
function test(des,fn){
  try {
    fn();
    console.log(`${des}通过测试`);
  } catch (error) {
    console.log(`${des}没有通过测试`);
  }
}

test('测试加法 3+7',()=>{
  expect(add(3,7)).toBe(10)
})

5.把math.js通过script脚本引入到index.html里面
【从Jest入门到 TDD,BDD双实战】Jest 前端自动化测试框架基础入门②_第2张图片

6.打开浏览器控制台
把代码复制到log去运行
【从Jest入门到 TDD,BDD双实战】Jest 前端自动化测试框架基础入门②_第3张图片
可以看到结果成功咯

你可能感兴趣的:(#,【Jest自动化测试】,前端,自动化,javascript,jest,TDD)