Question

我的一个React组件之一有一个loadDataFromLocalStorage（）方法。

loadDataFromLocalStorage（）将从localStorage获取项目并将其返回。

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

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

当我尝试运行测试时，我看到loadDataFromLocalStorage（）没有从localStorage检索数据。因此，我想测试将无法访问localStorage并返回数据。

因此，作为替代方案，我需要对 loadDataFromLocalStorage（）并返回它，以便可以对myFunc进行单元测试。

请告知。

Answer 1

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

.
├── __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

开玩笑的存根方法

1 个答案: