Sinon可以与vitest合并吗？

Question

我要迁移到Vite和Vitest。现在，我正在学习如何使用vitest，突然间我发现Vitest在加载模块Sinon方面存在问题。

Sinon与Vitest兼容吗？

当我使用“ NPM Run测试：单位”进行测试时，它的响应如下：

FAIL  src/stores/__tests__/counter.spec.ts [ src/stores/__tests__/counter.spec.ts ]
Error: [vite-node] Failed to load sinon
 ❯ async src/stores/__tests__/counter.spec.ts:9:31
      7| describe('useCounterStore', () => {
      8|     beforeEach(() => {
      9|         setActivePinia(createPinia());
       |                               ^
     10|     });
     11| 

我知道Vitest建议使用MSW来模拟请求，但是现在我想尝试一下Sinon，因为我的同事已经熟悉Sinon。

这是测试文件counter.spec.ts：

import { describe, it, expect, beforeEach } from 'vitest';
import { useCounterStore } from '../counter';
import { setActivePinia, createPinia } from 'pinia';
import axios from 'axios';
import sinon from 'sinon';

describe('useCounterStore', () => {
    beforeEach(() => {
        setActivePinia(createPinia());
    });

    it.skip('Counter Store - increment()', () => {
        const counter = useCounterStore();
        expect(counter.counter).toBe(0);
        counter.increment();
        expect(counter.counter).toBe(1);
    });

    it('getName - axios success', () => {
        const counter = useCounterStore();
        sinon.stub(axios, 'get').resolves({ data: 'abc' });

        counter.getName();

        expect(counter.name).toEqual('abc');
    });
});

这是Counter.ts（Pinia Store）

import axios from 'axios';
import * as pinia from 'pinia';

export const useCounterStore = pinia.defineStore({
    id: 'counter',
    state: () => ({
        counter: 0,
        name: '',
    }),
    getters: {
        doubleCount: state => state.counter * 2,
    },
    actions: {
        increment() {
            this.counter++;
        },
        async getName() {
            const rlt = await axios
                .get('https://jsonplaceholder.typicode.com/todos/1')
                .then((response:any) => response.data)
                .catch(error => console.log(error));
            // console.log(rlt);
            this.name = rlt.data;
        },
    },
});

Answer 1

最后，我关注 3种模拟axios in Jest 并选择了＃3方式 - Axios Mock-Adapter。

当我想模拟HTTP请求时，这将比MSW更容易，而Axios Mock-Audapter比Sinon更强大。