《孤勇者》最近火爆的乌烟瘴气，占领了小学生、乃至幼儿园，连我家2岁多的儿子尽然也会哼几句。尽管他认为这首歌是奥特曼的主题曲。

回到正数组指针题，现代json怎么读前端项目的工程化、模板化日益壮大，各数组种类库结构层出不穷，整个职业俨然一副百花齐放函数调用可以出现在表达式中吗百家争鸣的状况。而关于前端单元测验而言，在整个前端范畴，实践上单元测JSON验早已不算什么冷门论题，各种测验结构、库现已十分java语言完善。

关于一个前端开发而言，实践上咱们不太需求专json格式怎么打开心一切的这些测验结构数组指针、东数组公式西。咱们只需求按照自己所需（团教程魔方队、项目所需）挑选适合自己的即可。

而怎样选型，实践也十分简略。在现在前端项目大都依据结构的大前提下，直接从官方文档上找单元测验的部函数调用可以出现在表达式中吗分。官方必然会供给测验库或许引荐优异的社区测验库。

从前端项目层面json，无非便是UI的测验(简略的了解成DOM的测json验) 、功能性代码测验。

1、UI测验:

很容易了解，前端的教程的意思项数组去重方法目终究还是会展示在浏览器上，那么所谓的UI测教程魔方验也便是测验咱们写的代码和预期烘托的UI是否共同罢了。

结合到咱们现在实践项目，大都依据U教程视频怎么制作方法I结构的状况（比如React），咱们只需求跟随官方供给的UI测验途径即可，千万别去直接查找XX前端单元测验结构之类的。每个结构都有自己的特性，或多或少都会涉及到UI的烘托，比如虚拟DOM、生命周期之类。所以像React官方文档提到的@testing-library/教程视频怎么制作方法react（也有曾经运用过比较优异的Enzyme），都会依jsonp据React结构特性供给相关的API例如：render、renderHook之类的。

本文关于UI的测验不进行详细介绍。

2、功能性代码测验:

简略的说便是一段封装的代码，教程之家教学视频无论是一个函数或许是一个类。而这段代码大都状况和UI无关，咱们只需求要关注功能完结的自身，最简略的便是一个函数，输入什么参数，回来什么值。

功能性代码的测验将是本文叙述的重点，当然咱们需求一个测验结构供给支持，本文叙述的Jest便是这种一个结构。

在介绍Jest之前，还是先聊一聊何谓单元测验，进行有用的单元测验。

让人丧魂落魄的单元测验

说起单元测验，尤其是关于前端职业的同学们来说，真的算的上是让人丧魂落魄，毕竟单测这java环境变量配置个词听上去便是牛逼轰轰。

也经常有勇士会说，劳资React、antd一把梭哈，要个鸡儿的单元测验。

实践工作中，当你接收了别人的代码，大大都人或教程许会觉得在接手一座屎山，得想办法怎json数据样在屎山上进行雕花，而且还得让山不崩塌。阿西吧，函数调用中的参数太少劳资还不如重构了。

stop！又双叒叕扯远了。

好了，别管测验同学嘴里的什么黑盒、白盒、功能、功能。对咱们大大数组去重都人而言，单元测验，不便是对代码进行测验么。怎样测验呢？

代码测验代码

或许你有点了解了，那么问题来了，挖掘机哪家强？s函数调用中的参数太少orry，问题是怎么用代码测验代码？

举个简略的例子，你写个了函数，判别恳求是否成功。由于不可抗拒的要素，你们公司团队里边的后端同学，每个人的接口关于成功回来的界说不相同。有的是经过教程画画http 状况码200，有的依据回来数组公式值中的success是否为true，有的人回教程之家提取码来了一个code字段，值或许为200也或许为”200″。教程英文翻译

实践便是这么严酷，前端的小伙数组c语言伴总是在写这样那样的兼容计划。

// utils.js
/**
 * 判别恳求是否成功，成功回来，失利提示失利信息
 * @param {Object} response
 * @returns
 */
export const requestSuccess = response => {
  if (
    response.data.success === true ||
    response.data.code === 'success' ||
    response.data.code === '1000' ||
    response.data.code === 200 ||
    response.data.code === '200'
   ) {
    return response;
   }
  message.error(response.data.message || '恳求失利');
};

关于这样一个常见的函数而言，咱们需java培训求怎么对其进行单元测验呢？

所谓测验，无非便是在特定场景下(咱们能够先不必管这个场景是什么)，输入一些值，得到输出值，然后跟希望输出的值进行比对，看是否共同，假如共同则标明这一条测验用例经过。

看这个简略的例子，咱们不必管下面的test和expect办法详细是干Java什么的。

// utils.test.js
import { requestSuccess } from './utils.js'
test('requestSuccess办法 恳求正常测验用例', () => {
  const input = {
    data: {
      success: true,
      code: 200,
      message: '恳求成功'
     }
   };
  const expectOutput = input;
  const output = requestSuccess(input);
  expect(output).toEqual(expectOutput);
});

在上面的事例中，咱们来逐步分解：

首要界说了一个输入：input数组的定义。

然后将input作为参数，调用了requestSuccess办法，本次调用得到另一个回来数组去重方法值output。

最后便是断定，断定（也便是所谓的希望/断语）得到的输出值output等于希望的输出值expectOutput。

这是一段最根底的，正常输入值的单元测验代码，咱们能够总结出大函数调用可以作为独立的语句存在概的步骤：

1、界说输入值

2、数组去重将输入值带上，履行代码，得到输出值

3、对输出值进行断语

这个断语便是说你觉得这个输出值应该是什么，也断语这个输出值和你希望输出值匹配。当然java是什么意思，实践输出值和你的希望输出或许不匹配，那便是标明你的这条用例履行失利。失利的原因或许是你的源代码有问题，也或许是你单元测验的用例代码有问题。

OK，咱们了解了最根底的单元测验。javascript那么实在意义的单元测数组的定义验应该怎样写呢？

无非便是写单元测验用例，界数组初始化说各种输入值，判别和希望输出是否共同，然后教程进行剖析修正。

再回归到上面的requestSuccess办法，上面的测验用例仅仅是验证了正常状况下，当然这种状况或许占大大都，可是单元测验一般便是为数组了兼容小部分的反常场景。

那么接下来，咱们就来剖析教程英语下一般意义上json数据恳求失利场景的测jsonobject验用例：

// utils.test.js
import { requestSuccess } from './utils';

test('requestSuccess办法 恳求失利测验用例', () => {
  const input = {
    data: {
      success: false,
      message: '恳求失利'
     }
   };
  const output = requestSuccess(input); // 没有回来值，output为undefine
  expect(output).toBeUndefined(); 
});

好函数调用了，到这儿，有的同学说，恳求正常、恳求反常的状况都覆盖了，单元测验完结，能够提交测验，然后进行愉快的摸鱼了。

等等，工作没有那么简略。

测验同学急急忙忙来找你了，说你的数组去重程序又崩了，页面空白了。

你让测验同学给你复现了，一步一步jsonobjectdebug。本来发现，调用你requestSuccess办法的response参数教程之家教学视频，尽然为一个空目标： {} 。

你或许会直呼好家伙，后端不讲武德啊（当然或许性很多，或许并不是后端一个人的锅），由于不可抗拒要素，你又得去改代码，一边改一边骂。

改完之后的源码如下，然后你又函数调用满意的告知测验同学现已改完，没有问题了。

export const requestSuccess = response => {
  if (
    response.data?.success === true ||
    response.data?.code === 'success' ||
    response.data?.code === '1000' ||
    response.data?.code === 200 ||
    response.data?.code === '200'
   ) {
    return response;
   }
  message.error(response.data.message || '恳求失利');
};

成果不一会，测验同学说，你的程序又崩了，页面空白了。

你慌了，喃喃自语的说道，没问题啊，劳资都写了兼容了，让测验同学给你复现了，一步一步de教程的意思bug。本来发现，调用你reqjava面试题uestSuccess办法的response参数，尽然为undefin函数调用可以作为独立的语句存在ed。你破口大骂，告知测验是后端的锅，是另一个前端瞎鸡儿java怎么读调用，java环境变量配置和你无关。掰扯了一段时刻，你又改了下你的代码:

// 当然下面的代码还是能够持续优化
export const requestSuccess = response => {
  if (
    response?.data?.success === true ||
    response?.data?.code === 'success' ||
    response?.data?.code === '1000' ||
    response?.data?.code === 200 ||
    response?.data?.code === '200'
   ) {
    return response;
   }
  message.error(response.data.message || '恳求失利');
};

再回到jsonobject单元测验的正题上，上面的那些反常状况，在实践项目运转中举目皆javaee是。而除json解析了合作测验同学发现bug然后修正之外，咱们在单元测验的时分即可发现，并优化自己的代码。

例如requejson格式stSuccess针对这个办法而言，咱们先不必去管实践调用时分什么恳求成功、恳求函数调用可以作为一个函数的形参失利，只去针对这个办法自身，调用requestSuccejson怎么读ss办法的参数或许性是十分多的，各种类型的，所以咱们能够以每一种类型的输入值作json是什么意思为一条测验用例。

// utils.test.js
import { requestSuccess } from './utils';

// 这个describe能够不必纠结，了解成几份用例的调集，仅仅共同为反常输入的描绘
describe('requestSuccess办法反常输入测验用例', () => {
  test('response为空目标测验', () => {
    const input = {};
    const output = requestSuccess(input);
    expect(output).toBeUndefined();
   });

  test('response为undefined测验', () => {
    const output = requestSuccess();
    expect(output).toBeUndefined();
   });

  test('response为Number类型测验', () => {
    const output = requestSuccess(123);
    expect(output).toBeUndefined();
   });
});

在写了这么多的反常输入的json数据测验用例之java面试题后，你会发现你一开端写的requestSuccess不够强大，导致单元测验用例履行失利，所以你能够一遍又一遍的修正你的源码，直至测验函数调用可以作为独立的语句存在用例都经过。

总结：怎么json怎么读进行有用的单元测验，最简略的做法便是考虑各种反常/边界输入值，编教程画画写相应的测验用例，经过单元测教程之家验的履行，优化你的代码。

当然做好单元测验，并不仅仅仅仅说考虑各种反常输入即可，实json格式怎么打开践还会涉及到开发时分的考虑(比如常说的测验驱动开发之类的)以及十分多的完结细节，这个或许就需求你慢慢的了解了。

Jest

介绍

官方链接

Jest is a delightf数组公式ul JavaScript Testing Framework函数调用的四个步骤 with a focus on simplicity.

It works with projects using: Babel, TypeScript, Node, React, AngulaJavar, Vue and more!

官方的介绍便是上面2段话，便是说jest是一个让人愉悦的js测验结构，专心于简略性。能够合作babel、ts、node、react、ang教程英语ular、vue等json文件是干什么的其他库一起运用。

咱函数调用中的参数太少们前文提及的什么describe、test、expect办法等等在Jest中都有相应的api。

一、根底教程

装置

能够运用yarn或许npm进行装置

yarn add jest -D | npm i jest -D

源码开发

这儿举了一个简略的例子，实函数调用的四个步骤践组件开发需求运用ts以及其他UI测验结构。

例如开发一个根底办法，回来2个教程之家参数的和。文件名为sum.ts函数调用可以出现在表达式中吗

// sum.js
function sum(a, b) {
 return a + b;
}
export default sum;

测验用例编写

首要咱们依据上面的目标文件(sum.js)创立一个测验用例文件– sum.test.js，测验用例文件名称共同为*.test.js(后缀依据实践场景区分为.js或许.ts或许.tsx)

// sum.test.js
import sum from './sum';

test('adds 1 + 2 to equal 3', () => {
 expect(sum(1, 2)).toBe(3);
});

开端测验

增加下面的部分到你的package.json中

{
 "scripts": {
  "test": "jest"
  }
}

最后，履行yarn testornpm run test指令，Jest将会打印如下信jsonobject息:

PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

就这样，依据jestjava面试题的一个根底单元测验流程走函数调用好了，Jest的单元测验中心便是在test办法的第二个参数里边，exp数组ect办法回来一个希望目标，经过匹配器(数组初始化例如to教程之家教学视频Be)进行断语，希望是否和你预期的共同，和预期共同则单jsonp元测验经过，不共同json格式怎么打开则测验无法经过，需求扫除问题然后持续进行单元测验。

更多的配置以及指令行参数请参阅官方文档json怎么读下面开端讲解一些中心API。

二、中心API

大局办法

在你的测验文件中，Jest将下面这些办json格式怎么打开法和目标放置大局环境，所以你无需再显式的去require或许import。当然，假如你更喜欢显式的json数据import，也能够运用例如import { descri函数调用可以作为独立的语句存在be, e函数调用xpect, it } from '@jest/globals'的办法。

1、`test(name, fn, timeout)`

test有别号it，两个办法是相同的。

第一个参数是函数调用的三种方式你想要描绘的测验用例名称; 第二个参数是包含测验希望的函数，也是测验用例的中心。第三个参数(可选)是超时时刻，也便是超越多久将会撤销测验（默许是5秒钟）

Note: 假如fn回来的是个promise，Jest在完结测验前将会等候Prjava模拟器omi函数调用是什么意思se到达resolved状况数组和链表的区别。详细状况本文下面也会讲到怎么对异步代码进行测验。

匹配器

Jest运用匹配器能够让你运用各种办法测验你的代码，Jest中的匹配器实践便是expect办法回来的希望目标中包含教程之家的相关办法。官方供给了十分多的匹json格式怎么打开配器，完善的学习请查看官方文档。

下面摘选了几个最常见的匹配器办法。

1、`.toBe(value)`

toBe是最教程拼音简略最根底的匹配器，便是断定是否准确匹配，toBe办法运用了Object.is办法来测验准确相等。

Object.is办法的断定准则能够参阅这儿

test('two plus two is four', () => {
 expect(2 + 2).toBe(4);
});

在测验中，你有时需java面试题求区分 undefined、 null，和 false，但有时你又不需求区分。 Jest 让你清晰你想要什么。

toBeNull 只匹配 null
toBeUndefined 只匹配 undefjava编译器ined
toBeDefined 与 toBeUndefined 相反
toBeTruthy 匹配任何 if 句子为真
toBeFalsy 匹配任何 if 句子为假

2、`.not`

十分容易了解，一般便是反向测验

test('two plus two is four', () => {
 expect(2 + 2).not.toBe(4);
});

3、`.toEqual`

递归查看目标或数组的每个字段

和上面的toBe进行比照，toBe比照俩目标比照的是内存地址，toEqual比的是特点值。

test('object assignment', () => {
  const data1 = { one: 1, two: 2 };
  const data2 = { one: 1, two: 2 };
  expect(data1).toBe(data2); // 测验失利
  expect(data1).toEqual(data2);// 测验经过
});

4、`expect教程之家教学视频.assertions`

expect.assertions(函数调用栈number) 验证必教程拼音定数量的断语在某个测验用例中被调用。通常在异步代码测验中十分有用，目的便是为了保证一切的断语被实在的调用了。

比如下面这个例子，假如去掉了e教程的意思xpect.assertions(2), 那java是什么意思么测验用例会经过测验，但实践的需求应该是失利的，由于咱们最初的希望是catch中的断语也会被调用。而javaee有了expect.assertions(2)，Jest会判别断语实践调用的数量和咱们预期是否共同，假如不共同则说明测验失利。

test('doAsync calls both callbacks', () => {
  expect.assertions(2);
  return Promise.resolve(123).then((data: number) => {
    expect(data).toBe(123);
    return; // 例如手抖写了return
    // 由于某些原因下面的代码没有履行
    throw new Error('报错了');
  }).catch(err => {
    expect(err).toBe('报错了');
  });
});

异步代码测验

在JavaScript中履行异步代码是很常见的。当你有以数组去重异步办法运转的代码时，Jest 需求知道当时它测验的代码是否已履行完结，然后它能json够转移到另一个测验。 Jest有若干办法处理这种状况。

回调

最常见的异步模式便是回调函数，例如下面的setTimeout办法，下面的测验用例无法经过，原因是Jest无法知道callJSONback详细的调用时刻，所以会形成测验现json是什么意思已结束，可是setTimeout的callback还没有履行。

test('the data is peanut butter', () => {
  function callback(data: string) {
    expect(data).toBe('peanut butter');
  }
  setTimeout(() => {
    callback('peanut butter');
  }, 2000);
});

想要解java模拟器决上面的问题，十分简json解析略，很容易就会联想到音讯通知机制，也便是在callback调用的时分通知Jest，表明当时测验用例经过，能够跑下一个测验。

test办法的第二个参数fn，能够增加一个done参数，done是一个办法，调用了done，便是通知Jest测验完结，当然假如你的测验用例中的done办法始终没有履行，那么你的测验也会失利（超时），所以最好的办法便是加上try catch。

test('the data is peanut butter', done => {
  function callback(data: string) {
    try {
      expect(data).toBe('peanut butter');
      done();
    } catch (err) {
      done(err);
    }
  }
  setTimeout(() => {
    callback('peanut butter');
  }, 2000);
});

Promise

假如你的代码运用了Promise， Jest供给了一种愈加直接的办法去处理异步测验。在test第二个参数fn中直接回来一个promise，Jest就会等候这个promise到达resolved状况，假如到达了fulfille函数调用可以作为一个函数的形参d状况，测验将会自动失利。

例如这个事例，此测验用例能够正常的经过

test('promise resolved', () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  }).then((data: string) => {
    expect(data).toBe('resolved');
  });
});

假如promise fulfilled如下，则数组的定义测验用例会跑失利

test('promise fulfilled', () => {
  return Promise.reject('fulfilled').then((data: string) => {
    expect(data).toBe('fulfilled');
  })
});

当然咱们也能够运用catch办法，例如下面这个例子，测验用例就能够正常json解析的经过。

test('promise fulfilled', () => {
 expect.assertions(1);
  return Promise.reject('fulfilled').catch(err => {
    expect(err).toMatch('fulfilled');
  });
});

promise代码能够合作匹配器.resjava怎么读olves和rejects一起运用，运用事例如下:

test('promise resolved', () => {
  return expect(Promise.resolve('resolved')).resolves.toBe('resolved');
});
test('promise fulfilled', () => {
  return expect(Promise.reject('fulfilled')).rejects.toMatch('fulfilled');
});

Asy函数调用可以出现在表达式中吗nc/Await

假如你的代码运用了Promise， Jest供给了一种愈加直接的办法去处理异步测验。在t函数调用可以作为独立的语句存在est第二个参数fn中直接回来一个promise，Jest就会等候这个promise到达resolved状况，假如到达了fuljava语言filled状况，测验将会自动失利。函数调用语句

const TEN = 10;
const BASE = 5;
function fetchData () {
  return new Promise((resolve, reject) => {
    const random = Math.random() * TEN;
    random > BASE ? resolve(random) : reject(random);
  });
}

test('the random promise', async () => {
  expect.assertions(1);
  try {
    const random = await fetchData();
    expect(random).toBeGreaterThan(BASE);
  } catch (e) {
    expect(e).toBeLessThanOrEqual(BASE);
  }
});

Mock Functions

Mock 函数简略的javaee说便是模仿一个函数，这个java培训功能很数组词强大，例如nodejs中没有DOM/BOM，及时是jsdom也会缺少一些api，那么咱教程画画们能够运用mock函数调用语句函数来进行一些测验java怎么读，详细暂不详细说明。

有两种办法能够模仿函数：要么在测验代码中创立一个 mock 函数，要么编写一个手动 mock来覆盖模块依赖。

Mock Functions Doc

运用 mock 函数

假定咱们要测验函数 forEach 的内部完结，这个函数为传入的数组中的每个元素调用一次回调函数。

function forEach(items, callback) {
 for (let index = 0; index < items.length; index++) {
  callback(items[index]);
  }
}

为数组排序了测验此函数，咱们能够运用一个 mock 函数，然后查看 mock 函函数调用是什么意思数的状况来保证回调函数按期调用。

const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);

// 此 mock 函数被调用了两次
expect(mockCallback.mock.calls.length).toBe(2);

// 第一次调用函数时的第一个参数是 0
expect(mockCallback.mock.calls[0][0]).toBe(0);

// 第2次调用函数时的第一个参数是 1
expect(mockCallback.mock.calls[1][0]).toBe(1);

// 第一次函数调用的回来值是 42
expect(mockCallback.mock.results[0].value).toBe(42);

`.moc函数调用是什么意思k` 特点

一切的 mock 函数都有这个特殊的 .mock特点，它保存了关于此函数怎么被调用、调用时的回来值的信息。 .mock 特点还追寻每次调用时 this的值，所以咱们同样能够也检视

Mock 的回来值

const filterTestFn = jest.fn();

// Make the mock return `true` for the first call,
// and `false` for the second call
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);

const result = [11, 12].filter(num => filterTestFn(num));

console.log(result);
// > [11]
console.log(filterTestFn.mock.calls);
// > [ [11], [12] ]

Mocking Modules

在Jest单元教程之家教学视频测验的实在场景中，会有很多的数据来自接口，可是Jest并不引荐直接在测验代码中去调用实在的接口，由于这或许会让java模拟器测验变得十分缓慢而且脆弱，所以jest.fn().mock函数调用的四个步骤ResolvedValue供Java给了mock接口的办法，运用假数据进行测验。

test('async test', async () => {
  const asyncMock = jest.fn().mockResolvedValue(23);
  const result = await asyncMock(); // 43
  expect(result).toBe(23);
});

快照测验

每逢你想要保证你的UI不会有意外的改变，快照测验是十分有用的东西。

一点典型java语言的快照测验事例便是一个移动端的app烘托一个UI组件，拍下快照，然后将其与之前测验存储的参阅json快照文件进行比照,假如2个快照不匹配教程魔方的话测验就会失利。简略的来说便是比照前后2次函数调用中的参数太少组件烘托json格式的相片，这个测验办法十分适合React这类UI结构。

Jest快照测函数调用的四个步骤验第一次会生成一个快照文件，就像下面json格式这样

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`component--Loading 单元测验start 1`] = `
<div
 className="container"
>
 <div
  className="inner"
 >
  <div
   className="boxLoading"
  />
  <div
   className="title"
  >
   努力加载中...
  </div>
 </div>
</div>
`;

咱们能够在Jest 指令中参加–updateSnapshot，这样快照有跟新的话会跟新快照文件而不是直接让整个快照测验失利了。

建议把快照测验文件提交到git，快照测验文件也能够进行code-review。

前端单元测试—孤勇者级教程

让人丧魂落魄的单元测验

Jest

介绍

一、根底教程

装置

源码开发

测验用例编写

开端测验

二、中心API

大局办法

1、`test(name, fn, timeout)`

匹配器

1、`.toBe(value)`

2、`.not`

3、`.toEqual`

4、`expect教程之家教学视频.assertions`

异步代码测验

回调

Promise

Asy函数调用可以出现在表达式中吗nc/Await

Mock Functions

运用 mock 函数

`.moc函数调用是什么意思k` 特点

Mock 的回来值

Mocking Modules

快照测验

作者信息

前端单元测试—孤勇者级教程

让人丧魂落魄的单元测验

Jest

介绍

一、根底教程

装置

源码开发

测验用例编写

开端测验

二、中心API

大局办法

1、test(name, fn, timeout)

匹配器

1、.toBe(value)

2、.not

3、.toEqual

4、expect教程之家教学视频.assertions

异步代码测验

回调

Promise

Asy函数调用可以出现在表达式中吗nc/Await

Mock Functions

运用 mock 函数

.moc函数调用是什么意思k 特点

Mock 的回来值

Mocking Modules

快照测验

相关文章

Compose太香了，不想再写传统 xml View？教你如何在已有View项目中混合使用Compose

前端按钮/组件权限管理

甄选靶机精讲系列（一）——Jarbas：你对Jenkins了解多少?

大逆不道，从天界偷下来的算法修仙秘籍竟然传到你手上

作者信息

1、`test(name, fn, timeout)`

1、`.toBe(value)`

2、`.not`

3、`.toEqual`

4、`expect教程之家教学视频.assertions`

`.moc函数调用是什么意思k` 特点