reactjs - Jest stub 方法

Question

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

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

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

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

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

因此，作为替代方案，我需要 stub 值 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;

您在 myFunc 中使用 loadDataFromLocalStorage 函数:

import loadDataFromLocalStorage from './loadDataFromLocalStorage';

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

export { someModule };

模拟__mocks__目录中的loadDataFromLocalStorage函数:

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