前端测试框架Jest系列教程 -- Expect（验证）

时间 2019-11-18

标签前端测试框架 jest 系列教程 expect 验证繁體版

原文原文链接

写在前面

在编写测试时，咱们一般须要检查值是否知足某些条件，Jest中提供的expect容许你访问不少“Matchers”，这些“匹配器”容许您验证不一样的东西。html

Expect 能够验证什么

Jest中提供了以下的验证方法：前端

expect(value)
expect.extend(matchers)
expect.anything()
expect.any(constructor)
expect.arrayContaining(array)
expect.assertions(number)
expect.hasAssertions()
expect.not.arrayContaining(array)
expect.not.objectContaining(object)
expect.not.stringContaining(string)
expect.not.stringMatching(string | regexp)
expect.objectContaining(object)
expect.stringContaining(string)
expect.stringMatching(string | regexp)
expect.addSnapshotSerializer(serializer)
.not
.resolves
.rejects
.toBe(value)
.toHaveBeenCalled()
.toHaveBeenCalledTimes(number)
.toHaveBeenCalledWith(arg1, arg2, ...)
.toHaveBeenLastCalledWith(arg1, arg2, ...)
.toHaveBeenNthCalledWith(nthCall, arg1, arg2, ....)
.toHaveReturned()
.toHaveReturnedTimes(number)
.toHaveReturnedWith(value)
.toHaveLastReturnedWith(value)
.toHaveNthReturnedWith(nthCall, value)
.toBeCloseTo(number, numDigits)
.toBeDefined()
.toBeFalsy()
.toBeGreaterThan(number)
.toBeGreaterThanOrEqual(number)
.toBeLessThan(number)
.toBeLessThanOrEqual(number)
.toBeInstanceOf(Class)
.toBeNull()
.toBeTruthy()
.toBeUndefined()
.toContain(item)
.toContainEqual(item)
.toEqual(value)
.toHaveLength(number)
.toMatch(regexpOrString)
.toMatchObject(object)
.toHaveProperty(keyPath, value)
.toMatchSnapshot(propertyMatchers, snapshotName)
.toStrictEqual(value)
.toThrow(error)
.toThrowErrorMatchingSnapshot()

下面咱们将介绍部分验证的使用场景：git

expect(value)github

每当您但愿测试一个值时，都会使用expect函数。你不多会调用expect自己。相反你将使用expect和“matcher”函数来断言关于值的某些内容。更容易理解这个例子。假设您有一个方法bestLaCroixFlavor()，它应该返回字符串“柚子”。下面是测试方法:数组

test('the best flavor is grapefruit', () => {
  expect(bestLaCroixFlavor()).toBe('grapefruit');
});

在上面的case中，toBe是matcher函数。为了帮助你测试不一样的东西，Jest中有不少不一样的matcher函数。promise

expect的参数应该是代码生成的值，而匹配程序的任何参数都应该是正确的值。若是你将它们混合在一块儿，那么你的测试仍然能够工做，可是失败测试的错误消息看起来会很奇怪。app

expect.extend(matchers)框架

你可使用expect.extend将本身的matcher添加到Jest中。例如假设你正在测试一个 theory library，而且你常常断言数字能够被其余数整除，你能够把它抽象成toBeDivisibleBy matcher:dom

expect.extend({
  toBeDivisibleBy(received, argument) {
    const pass = received % argument == 0;
    if (pass) {
      return {
        message: () =>
          `expected ${received} not to be divisible by ${argument}`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected ${received} to be divisible by ${argument}`,
        pass: false,
      };
    }
  },
});

test('even and odd numbers', () => {
  expect(100).toBeDivisibleBy(2);
  expect(101).not.toBeDivisibleBy(2);
  expect({apples: 6, bananas: 3}).toEqual({
    apples: expect.toBeDivisibleBy(2),
    bananas: expect.not.toBeDivisibleBy(2),
  });
});

expect.extends还支持异步匹配器。异步匹配器返回一个promise，所以你须要等待返回的值。让咱们使用一个示例matcher来讲明它们的用法。咱们要实现一个很是类似的matcher，而不是toBeDivisibleBy，惟一的区别是可分割的数字将从外部源中提取。　异步

expect.extend({
  async toBeDivisibleByExternalValue(received) {
    const externalValue = await getExternalValueFromRemoteSource();
    const pass = received % externalValue == 0;
    if (pass) {
      return {
        message: () =>
          `expected ${received} not to be divisible by ${externalValue}`,
        pass: true,
      };
    } else {
      return {
        message: () =>
          `expected ${received} to be divisible by ${externalValue}`,
        pass: false,
      };
    }
  },
});

test('is divisible by external value', async () => {
  await expect(100).toBeDivisibleByExternalValue();
  await expect(101).not.toBeDivisibleByExternalValue();
});

匹配器应该返回带有两个键的对象(或对象的promise)。pass指示是否存在匹配，message提供了一个没有参数的函数，在失败时返回错误消息。所以当pass为false时，当expect(x). yourmatcher()失败时，消息应该返回错误消息。当pass为true时，消息应该返回expect(x).no . yourmatcher()失败时的错误消息。

这些辅助函数能够在自定义匹配器中找到: this.isNot，返回一个布尔值，让你知道这个匹配器是用否认的.not修饰符调用的，容许你翻转断言。

this.equals(a, b)

若是两个对象具备相同的值(递归地)，则返回true。

this.utils有不少有用的工具。utils主要由来自jest-matcher-utils的导出组成。最有用的是matcherHint、printExpected和printReceived，它们能够很好地格式化错误消息。例如看看toBe matcher的实现:

const diff = require('jest-diff');
expect.extend({
  toBe(received, expected) {
    const pass = Object.is(received, expected);

    const message = pass
      ? () =>
          this.utils.matcherHint('.not.toBe') +
          '\n\n' +
          `Expected value to not be (using Object.is):\n` +
          `  ${this.utils.printExpected(expected)}\n` +
          `Received:\n` +
          `  ${this.utils.printReceived(received)}`
      : () => {
          const diffString = diff(expected, received, {
            expand: this.expand,
          });
          return (
            this.utils.matcherHint('.toBe') +
            '\n\n' +
            `Expected value to be (using Object.is):\n` +
            `  ${this.utils.printExpected(expected)}\n` +
            `Received:\n` +
            `  ${this.utils.printReceived(received)}` +
            (diffString ? `\n\nDifference:\n\n${diffString}` : '')
          );
        };

    return {actual: received, message, pass};
  },
});

打印结果以下：

 expect(received).toBe(expected)

    Expected value to be (using Object.is):
      "banana"
    Received:
      "apple"

当断言失败时，错误消息应该向用户提供必要的尽量多的信号，以便用户可以快速地解决问题。你应该编写一个精确的失败消息，以确保自定义断言的用户具备良好的开发经验。

expect.anything()

它匹配除null或undefined以外的任何内容。你能够在内部使用toEqual或toBeCalledWith而不是文字值。例如若是你想检查一个模拟函数是否被调用，它的参数是非空的:

test('map calls its argument with a non-null argument', () => {
  const mock = jest.fn();
  [1].map(x => mock(x));
  expect(mock).toBeCalledWith(expect.anything());
});

expect.any(constructor)

匹配给定构造函数所建立的任何内容。你能够在内部使用toEqual或toBeCalledWith而不是文字值。若是你想检查一个模拟函数是否被调用时带有一个数字:

function randocall(fn) {
  return fn(Math.floor(Math.random() * 6 + 1));
}

test('randocall calls its callback with a number', () => {
  const mock = jest.fn();
  randocall(mock);
  expect(mock).toBeCalledWith(expect.any(Number));
});

expect.arrayContaining(array)　

匹配一个接收到的数组，该数组包含预期数组中的全部元素。也就是说预期数组是接收数组的子集。所以它匹配一个接收到的数组，该数组包含不属于预期数组的元素。

你能够用它代替文字的值: toEqual或toBeCalledWith

describe('arrayContaining', () => {
  const expected = ['Alice', 'Bob'];
  it('matches even if received contains additional elements', () => {
    expect(['Alice', 'Bob', 'Eve']).toEqual(expect.arrayContaining(expected));
  });
  it('does not match if received does not contain expected elements', () => {
    expect(['Bob', 'Eve']).not.toEqual(expect.arrayContaining(expected));
  });
});

describe('Beware of a misunderstanding! A sequence of dice rolls', () => {
  const expected = [1, 2, 3, 4, 5, 6];
  it('matches even with an unexpected number 7', () => {
    expect([4, 1, 6, 7, 3, 5, 2, 5, 4, 6]).toEqual(
      expect.arrayContaining(expected)
    );
  });
  it('does not match without an expected number 2', () => {
    expect([4, 1, 6, 7, 3, 5, 7, 5, 4, 6]).not.toEqual(
      expect.arrayContaining(expected),
    );
  });
});

expect.assertions(number)

验证在测试期间调用了必定数量的断言。在测试异步代码时这一般颇有用，以便确保回调中的断言确实被调用。

假设咱们有一个函数doAsync，它接收两个回调callback1和callback2，它将异步地以一个未知的顺序调用它们。咱们能够用:

test('doAsync calls both callbacks', () => {
  expect.assertions(2);
  function callback1(data) {
    expect(data).toBeTruthy();
  }
  function callback2(data) {
    expect(data).toBeTruthy();
  }

  doAsync(callback1, callback2);
});

expect.hasAssertions()

验证在测试期间至少调用了一个断言。在测试异步代码时，这一般颇有用以便确保回调中的断言确实被调用。

假设咱们有一些处理状态的函数。prepareState调用一个状态对象的回调，validateState运行在那个状态对象上，waitOnState返回一个承诺，直到全部prepareState回调完成。咱们能够用:

test('prepareState prepares a valid state', () => {
  expect.hasAssertions();
  prepareState(state => {
    expect(validateState(state)).toBeTruthy();
  });
  return waitOnState();
});

expect.not.arrayContaining(array)

匹配所接收的数组，该数组不包含预期数组中的元素。也就是说，预期的数组不是接收数组的子集。它与 expect.arrayContaining 相反

describe('not.arrayContaining', () => {
  const expected = ['Samantha'];

  it('matches if the actual array does not contain the expected elements', () => {
    expect(['Alice', 'Bob', 'Eve']).toEqual(
      expect.not.arrayContaining(expected),
    );
  });
});

expect.not.objectContaining(object)

匹配任何未递归地匹配预期属性的接收对象。也就是说预期对象不是接收对象的子集。所以，它匹配所接收的对象，该对象包含不属于预期对象的属性。它与expect. objectcontains相反。

describe('not.objectContaining', () => {
  const expected = {foo: 'bar'};

  it('matches if the actual object does not contain expected key: value pairs', () => {
    expect({bar: 'baz'}).toEqual(expect.not.objectContaining(expected));
  });
});

expect.not.stringContaining(string)

匹配不包含确切指望字符串的接收字符串。它与expect.stringContaining.相反

describe('not.stringContaining', () => {
  const expected = 'Hello world!';

  it('matches if the actual string does not contain the expected substring', () => {
    expect('How are you?').toEqual(expect.not.stringContaining(expected));
  });
});

expect.not.stringMatching(string | regexp)

匹配不匹配预期regexp的接收字符串。它与expect.stringMatching.相反

describe('not.stringMatching', () => {
  const expected = /Hello world!/;

  it('matches if the actual string does not match the expected regex', () => {
    expect('How are you?').toEqual(expect.not.stringMatching(expected));
  });
});

expect.objectContaining(object)

匹配递归地匹配预期属性的任何接收对象。也就是说，预期对象是接收对象的子集。所以，它匹配所接收的对象，该对象包含不属于预期对象的属性。

与指望对象中的文字属性值不一样，您可使用matchers、expect.anything()等等。

假设咱们但愿使用事件对象调用onPress函数，咱们须要验证的是事件是否有event.x属性和y属性。咱们能够这样作:

test('onPress gets called with the right thing', () => {
  const onPress = jest.fn();
  simulatePresses(onPress);
  expect(onPress).toBeCalledWith(
    expect.objectContaining({
      x: expect.any(Number),
      y: expect.any(Number),
    }),
  );
});

expect.stringMatching(string | regexp)

匹配与预期regexp匹配的接收字符串。你能够用它代替文字的值:

1. 在toEqual或toBeCalledWith
2. 匹配arraycontains中的元素
3. 匹配objectContaining 或者toMatchObject的属性

这个示例还展现了如何使用expect嵌套多个不对称的匹配器。在expect.arrayContaining stringMatching。

describe('stringMatching in arrayContaining', () => {
  const expected = [
    expect.stringMatching(/^Alic/),
    expect.stringMatching(/^[BR]ob/),
  ];
  it('matches even if received contains additional elements', () => {
    expect(['Alicia', 'Roberto', 'Evelina']).toEqual(
      expect.arrayContaining(expected),
    );
  });
  it('does not match if received does not contain expected elements', () => {
    expect(['Roberto', 'Evelina']).not.toEqual(
      expect.arrayContaining(expected),
    );
  });
});

.toBe(value)

toBe只是检查一个值是否符合您的指望。它使用对象。是要检查彻底相等。例如此代码将验证can对象的一些属性:

const can = {
  name: 'pamplemousse',
  ounces: 12,
};

describe('the can', () => {
  test('has 12 ounces', () => {
    expect(can.ounces).toBe(12);
  });

  test('has a sophisticated name', () => {
    expect(can.name).toBe('pamplemousse');
  });
});

.toEqual(value)

若是要检查两个对象是否具备相同的值，请使用. toequal。此matcher递归地检查全部字段的相等性，而不是检查对象标识——这也称为“深度相等”。例如，toEqual和toBe在这个测试套件中表现不一样，因此全部的测试都经过:

const can1 = {
  flavor: 'grapefruit',
  ounces: 12,
};
const can2 = {
  flavor: 'grapefruit',
  ounces: 12,
};

describe('the La Croix cans on my desk', () => {
  test('have all the same properties', () => {
    expect(can1).toEqual(can2);
  });
  test('are not the exact same can', () => {
    expect(can1).not.toBe(can2);
  });
});

.toMatchObject(object)

使用. tomatchobject检查一个JavaScript对象是否匹配一个对象的属性子集。它将把接收到的对象与预期对象中没有的属性匹配起来。

您还能够传递一个对象数组，在这种状况下，只有当接收到的数组中的每一个对象(在上面描述的番茄对象意义中)与预期数组中的相应对象相匹配时，该方法才会返回true。若是想要检查两个数组在它们的元素数量上是否匹配，而不是arrayinclude，这是很是有用的，由于它容许在接收的数组中添加额外的元素。

能够将属性匹配到值或匹配项。

const houseForSale = {
  bath: true,
  bedrooms: 4,
  kitchen: {
    amenities: ['oven', 'stove', 'washer'],
    area: 20,
    wallColor: 'white',
  },
};
const desiredHouse = {
  bath: true,
  kitchen: {
    amenities: ['oven', 'stove', 'washer'],
    wallColor: expect.stringMatching(/white|yellow/),
  },
};

test('the house has my desired features', () => {
  expect(houseForSale).toMatchObject(desiredHouse);
});

describe('toMatchObject applied to arrays arrays', () => {
  test('the number of elements must match exactly', () => {
    expect([{foo: 'bar'}, {baz: 1}]).toMatchObject([{foo: 'bar'}, {baz: 1}]);
  });

  // .arrayContaining "matches a received array which contains elements that
  // are *not* in the expected array"
  test('.toMatchObject does not allow extra elements', () => {
    expect([{foo: 'bar'}, {baz: 1}]).toMatchObject([{foo: 'bar'}]);
  });

  test('.toMatchObject is called for each elements, so extra object properties are okay', () => {
    expect([{foo: 'bar'}, {baz: 1, extra: 'quux'}]).toMatchObject([
      {foo: 'bar'},
      {baz: 1},
    ]);
  });
});

.toHaveProperty(keyPath ,value)

使用. tohaveproperty检查在提供的引用keyPath中是否存在对象的属性。要检查对象中深度嵌套的属性，可使用点表示法或包含深度引用的keyPath的数组。

可选地，你能够提供一个值来检查它是否等于目标对象的keyPath中的值。此matcher使用“深度相等”(如toEqual()))并递归地检查全部字段的相等性。

下面的示例包含一个带有嵌套属性的houseForSale对象。咱们使用tohave属性来检查对象中各类属性的存在性和值。

// Object containing house features to be tested
const houseForSale = {
  bath: true,
  bedrooms: 4,
  kitchen: {
    amenities: ['oven', 'stove', 'washer'],
    area: 20,
    wallColor: 'white',
    'nice.oven': true,
  },
};

test('this house has my desired features', () => {
  // Simple Referencing
  expect(houseForSale).toHaveProperty('bath');
  expect(houseForSale).toHaveProperty('bedrooms', 4);

  expect(houseForSale).not.toHaveProperty('pool');

  // Deep referencing using dot notation
  expect(houseForSale).toHaveProperty('kitchen.area', 20);
  expect(houseForSale).toHaveProperty('kitchen.amenities', [
    'oven',
    'stove',
    'washer',
  ]);

  expect(houseForSale).not.toHaveProperty('kitchen.open');

  // Deep referencing using an array containing the keyPath
  expect(houseForSale).toHaveProperty(['kitchen', 'area'], 20);
  expect(houseForSale).toHaveProperty(
    ['kitchen', 'amenities'],
    ['oven', 'stove', 'washer'],
  );
  expect(houseForSale).toHaveProperty(['kitchen', 'amenities', 0], 'oven');
  expect(houseForSale).toHaveProperty(['kitchen', 'nice.oven']);
  expect(houseForSale).not.toHaveProperty(['kitchen', 'open']);
});

写在最后

文中列出的只是其中一部分，更多详细信息请参考官网： https://facebook.github.io/jest/docs/en/expect.html#expectanything

系列教程：

　 1. 前端测试框架Jest系列教程 -- Matchers（匹配器）

　 2.前端测试框架Jest系列教程 -- Asynchronous(测试异步代码)

　 3.前端测试框架Jest系列教程 -- Mock Functions（模拟器）

　 4.前端测试框架Jest系列教程 -- Global Functions（全局函数）

5.前端测试框架Jest系列教程 -- Expect（验证）