Skip to content

Commit b79ac92

Browse files
fetchMock -> fetchMocker (#5)
I was reviewing code at work and I saw this: ```ts beforeEach(() => { const fetchMock = createFetchMock(vi); fetchMock.enableMocks(); fetchMock.mockIf(`/bla`); }); it("Bla", () => { bla(); expect(fetchMock.mock.calls.length).toEqual(1); }); ``` I was confused, why we have `const fetchMock` in `beforeEach` but then reference `fetchMock` in the test, it should be undefined there, out of the scope. Turns out it was because `fetchMock` is also a global variable. Looking at type definitions, I see that `createFetchMock` is also called `createMocker`. So I think it'll make more sense to do this: ```ts beforeEach(() => { const fetchMocker = createFetchMock(vi); fetchMocker.enableMocks(); fetchMocker.mockIf(`/bla`); }); it("Bla", () => { bla(); expect(fetchMock.mock.calls.length).toEqual(1); }); ``` This way there's no clash and it makes more sense - you create `fetchMocker`, then `fetchMocker.enableMocks()` will define global `fetchMock` for you. Hope this makes sense!
1 parent 7dc7d6a commit b79ac92

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

README.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ Create a `setupVitest` file to setup the mock or add this to an existing `setupF
5151
import createFetchMock from 'vitest-fetch-mock';
5252
import { vi } from 'vitest';
5353

54-
const fetchMock = createFetchMock(vi);
54+
const fetchMocker = createFetchMock(vi);
5555

5656
// sets globalThis.fetch and globalThis.fetchMock to our mocked version
57-
fetchMock.enableMocks();
57+
fetchMocker.enableMocks();
5858
```
5959

6060
Add the setup file to your vitest [config](https://vitest.dev/config/#setupfiles):
@@ -78,13 +78,13 @@ the `...enableMocks()` line in `setupVitest.js`:
7878
```js
7979
import createFetchMock from 'vitest-fetch-mock';
8080
import { vi } from 'vitest';
81-
const fetchMock = createFetchMock(vi);
81+
const fetchMocker = createFetchMock(vi);
8282

8383
// adds the 'fetchMock' global variable and rewires 'fetch' global to call 'fetchMock' instead of the real implementation
84-
fetchMock.enableMocks();
84+
fetchMocker.enableMocks();
8585

8686
// changes default behavior of fetchMock to use the real 'fetch' implementation and not mock responses
87-
fetchMock.dontMock();
87+
fetchMocker.dontMock();
8888
```
8989

9090
If you want a single test file to return to the default behavior of mocking all responses, add the following to the test
@@ -93,7 +93,7 @@ file:
9393
```js
9494
beforeEach(() => {
9595
// if you have an existing `beforeEach` just add the following line to it
96-
fetchMock.doMock();
96+
fetchMocker.doMock();
9797
});
9898
```
9999

@@ -102,7 +102,7 @@ To enable mocking for a specific URL only:
102102
```js
103103
beforeEach(() => {
104104
// if you have an existing `beforeEach` just add the following lines to it
105-
fetchMock.mockIf(/^https?:\/\/example.com.*$/, (req) => {
105+
fetchMocker.mockIf(/^https?:\/\/example.com.*$/, (req) => {
106106
if (req.url.endsWith('/path1')) {
107107
return 'some response body';
108108
} else if (req.url.endsWith('/path2')) {
@@ -126,12 +126,12 @@ If you have changed the default behavior to use the real implementation, you can
126126
be mocked by using the `mockOnce` function:
127127

128128
```js
129-
fetchMock.mockOnce('the next call to fetch will always return this as the body');
129+
fetchMocker.mockOnce('the next call to fetch will always return this as the body');
130130
```
131131

132-
This function behaves exactly like `fetchMock.once` but guarantees the next call to `fetch` will be mocked even if the
133-
default behavior of fetchMock is to use the real implementation. You can safely convert all you `fetchMock.once` calls
134-
to `fetchMock.mockOnce` without a risk of changing their behavior.
132+
This function behaves exactly like `fetchMocker.once` but guarantees the next call to `fetch` will be mocked even if the
133+
default behavior of fetchMock is to use the real implementation. You can safely convert all you `fetchMocker.once` calls
134+
to `fetchMocker.mockOnce` without a risk of changing their behavior.
135135

136136
### To setup for an individual test
137137

@@ -141,8 +141,8 @@ Add the following line to the start of your test case (before any other imports)
141141
import createFetchMock from 'vitest-fetch-mock';
142142
import { vi } from 'vitest';
143143

144-
const fetchMock = createFetchMock(vi);
145-
fetchMock.enableMocks();
144+
const fetchMocker = createFetchMock(vi);
145+
fetchMocker.enableMocks();
146146
```
147147

148148
#### TypeScript importing

0 commit comments

Comments
 (0)