StencilJs 的 Jest 测试中的 Mocking 次服务调用

Question

在我的 StencilJs 应用程序中，我正在使用 Jest 编写测试。 我有一个组件 class，它使用服务 class 进行 REST 调用。 为简单起见，服务 class 只有一种方法可以打印一些文本：

组件 class：

import {sayHello} from './helloworld-service';

@Component({
  tag: 'comp-home',
  styleUrl: 'comp-home.scss',
  shadow: false,
  scoped: true
})
export class MyComponent {

public callHelloWorldService () {
 return sayHello();

} }

服务 class 如下所示：

export function   sayHello  () {
 return "Hello!";
}

它只有一个 function，我想在我的测试方法中模拟这个 function，如下所示：

jest.mock('../helloworld/helloworld-service', () => ({
  sayHello: jest.fn()
}));
import { sayHello } from '../helloworld/helloworld-service';

const mockSayHello = sayHello as jest.Mock;


describe('mycomp-tests', () => {

  let compInstance;

  beforeEach(() => {
    mockSayHello.mockClear();
    compInstance = new MyComponent();
  });
  afterEach(() => {
    jest.clearAllMocks();
  });


  it('should return mock value', () => {
   mockSayHello.mockReturnValue("yahoo");
   expect(compInstance.callHelloWorldService()).toBe("yahoo");
  });

我已将本教程用于https://mikeborozdin.com/post/changing-jest-mocks-between-tests/编写模拟。

现在，我面临的问题是，如果我在测试中直接调用模拟服务方法，则会调用模拟实例并且测试通过：

 it('should return mock value', () => {
   mockSayHello.mockReturnValue("yahoo");
   expect(compInstance.callHelloWorldService()).toBe("yahoo");
  });

但是如果我通过我的组件调用服务方法，那么调用服务中的原始方法而不是模拟方法并且测试失败：

  it('should return mock value', () => {
   mockSayHello.mockReturnValue("yahoo");
   expect(compInstance.callHelloWorldService()).toBe("yahoo");//Fails ,return value is Hello !
  });

我如何确保组件也调用模拟方法？ 在测试等中模拟 REST 调用需要此行为。

Answer 1

我在模板单元测试中模拟了这样的函数

import * as HelloworldService from '../helloworld/helloworld-service';

HelloworldService.sayHello = jest.fn().mockReturnValue("yahoo");