使用最新的Jest设置在Angular 7应用程序中使用模拟或间谍测试localStorage

Question

我正在尝试使用 jest 对 Angular 7 应用程序进行单元测试，并想通过设置localStorage来测试是否调用了某个方法。但我知道在测试时设置真正的localStorage并不理想，因此必须使用 mocks 或 spies 。由于我是单元测试的新手，所以我想知道是否有更好的方法来测试它，以及我的方法是否正确。

我主要是因为this问题再次问这个问题。它说jest现在提供了开箱即用的localStorage支持。因此，按照以下方法，localStorage是自动模拟的还是我的方法错误？

login.component.spec.ts

    test('Call onSubmit() when localStorage is set', () => {
        const mockSubmit = jest.spyOn(component, 'onSubmit');
        localStorage.setItem('auth', 'abcd');
        component.ngOnInit();

        expect(mockSubmit).toBeCalled();
    });

---

login.component.ts

    ngOnInit(): void {
        if (localStorage.getItem('auth') !== null) {

            this.onSubmit();
        }
    }

嘲笑和暗中监视 对我来说有点混乱，因此请多多指教或帮助。

Answer 1

在组件中使用localStorage是一种不好的做法，最好将其逻辑移至单独的服务（例如AuthService），然后在测试中，您可以监视服务方法并检查它们toHaveBeenCalled < / p>