时间戳

首页 > 解决方案 > 开玩笑的存根方法

reactjs - 开玩笑的存根方法

问题描述

我的一个反应组件中有一个方法 loadDataFromLocalStorage() 。

loadDataFromLocalStorage() 将从 localStorage 获取项目并将其返回。

所以我正在为 myFunc() 编写单元测试用例。

myFunc(){
    var data = loadDataFromLocalStorage()();
    if(data) {
      return true;
    }    
  }

当我尝试运行测试时，我看到 loadDataFromLocalStorage() 没有从 localStorage 中检索数据。所以我猜测试将无法访问 localStorage 并返回数据。

因此，作为替代方案，我需要存根 loadDataFromLocalStorage() 的值并返回它，以便 myFunc 可以进行单元测试。

请指教..

标签： reactjsjestjsmocha.jschai

解决方案

这是解决方案，文件目录的结构：

.
├── __mocks__
│   └── loadDataFromLocalStorage.ts
├── index.spec.ts
├── index.ts
└── loadDataFromLocalStorage.ts

1 directory, 4 files

你原来的功能loadDataFromLocalStorage.ts：

function loadDataFromLocalStorage() {
  return () => {
    return '';
  };
}

export default loadDataFromLocalStorage;

你在你的使用loadDataFromLocalStorage函数myFunc：

import loadDataFromLocalStorage from './loadDataFromLocalStorage';

const someModule = {
  myFunc() {
    const data = loadDataFromLocalStorage()();
    console.log(`data: ${data}`);
    if (data) {
      return true;
    }
  }
};

export { someModule };

目录中的模拟loadDataFromLocalStorage功能__mocks__：

function loadDataFromLocalStorage() {
  return () => {
    return 'mock data';
  };
}

export default loadDataFromLocalStorage;

单元测试：

jest.mock('./loadDataFromLocalStorage.ts');
import { someModule } from './';

describe('someModule', () => {
  it('t1', () => {
    expect.assertions(1);
    const actualValue = someModule.myFunc();
    expect(actualValue).toBeTruthy();
  });
});

单元测试结果：

 PASS  src/mock-function/questions-57494989/index.spec.ts
  someModule
    ✓ t1 (10ms)

  console.log src/mock-function/questions-57494989/index.ts:6
    data: mock data

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.44s, estimated 3s

推荐阅读