suautumn/somethine_about_work

The record of jest use skills

somethine_about_work's Issues

css: 背景图位置设定

selector {
  background-position: x y; /* 背景图相对原点的位移，可选：center left 之类，也可以具体设置长度，当设置多个img的位置时候，使用‘,’间隔 */
  background-origin: padding-box; /* position位置相对原点，默认padding-box，可选：border-box, content-box; */
}

如何使用jest.mock方式来代理实际模块中函数调用

在使用jest框架编写自动化测试的时候，我们的项目常常需要和后端获取数据之后才能测试之后的逻辑。但这往往是不方便的，也比较依赖后台的接口是否正常。

所以jest提供了一个方式jest.mock可以代理这些真实的api接口进行模拟测试。

这里我以jest官方示例为例

// __test__/user.test.js
'use strict';

/**
 * jest.mock: (moduleName: string, moduleFunction?: () => unknow) => Jest
 * 如果根目录下面没有提供__mocks__/request.js 则request为undefined
 */
jest.mock('../request'); // mock request 模块

import * as user from '../user';

// Testing promise can be done using `.resolves`.
it('works with resolves', () => {
  expect.assertions(1);

  // 此时user.getUserName中request方法调用为__mocks__/request.js中的方法
  return expect(user.getUserName(5)).resolves.toEqual('Paul');
});

但是在实际使用过程中我的api文件可能不在根目录下，这个时候的仅仅一个jest.mock(moduleName)就无法正常工作了，这个时候我需要多添加一个具体实现方法，如下：

'use strict';

jest.mock('../api/request', () => {
  /**
   * 此为一个独立模块，不能再引入另外scope
   * 这是此模块所有函数能访问top scope
   */
  
  const users = {
    4: {name: 'Mark'},
    5: {name: 'Paul'},
  };
  return {
    __esModule: true, // 必要，表面这是个模块
    default: jest.fn(url => { // 等同于export default
      return new Promise((resolve, reject) => {
        const userID = parseInt(url.substr('/users/'.length), 10);
        process.nextTick(() =>
          users[userID]
            ? resolve(users[userID])
            : reject({
              error: 'User with ' + userID + ' not found.',
            }),
        );
      });
    })
  }
});

import * as user from '../user';

// Testing promise can be done using `.resolves`.
test('works with resolves', () => {
  expect.assertions(1);
  return expect(user.getUserName(5)).resolves.toEqual('Paul');
});