Skip to content

Commit

Permalink
docs: document how to use transform with jodeshift
Browse files Browse the repository at this point in the history
  • Loading branch information
wheresrhys committed Sep 18, 2024
1 parent 70dd5b2 commit 517a6ac
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 17 deletions.
3 changes: 3 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

36 changes: 25 additions & 11 deletions packages/codemods/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@

A tool for helping upgrade to fetch-mock@12.

## Usage

1. Install `npm i -D @fetch-mock/codemods jscodeshift`;
2. Manually modify any code using `.sandbox()` according to the example above.
3. Run `jscodeshift -t node_modules/@fetch-mock/codemods/wrc/index.jscodeshift .` to run over your entire project, or replace `.` with the directory/file paths you wish to modify. [The jscodeshift CLI has many options](https://jscodeshift.com/run/cli/) - adjust them to suit your project.
4. For scenarios where the codemod is unable to detect which variable contains a fetch-mock instance (e.g. when it is required in a global set up file, or when using `jest.mock()`) you may pass in one or more variable names using the `FM_VARIABLES` environment variable e.g. `FM_VARIABLES=fm,fetch`
5. After the codemods have executed, run your tests, correcting all the errors thrown. The notes on what is in/out of scope will help guide you.
6. Once all your tests are fixed you should be able to uninstall the codemods: `npm uninstall @fetch-mock/codemods jscodeshift`

## Features

- Identifies instances of fetch-mock imported using `require` or `import`
Expand All @@ -18,11 +27,12 @@ A tool for helping upgrade to fetch-mock@12.
- Javascript is a language with multiple ways to do the same thing. While these codemods attempt to cover a few different patterns, it's likely that they don't cover all the ways fetch-mock is being used. Please raise an issue if you think they can be improved.
- fetch-mock@12 no longer has the `.mock()` method which combines defining a route _and_ setting up global mocking. All calls to `.mock()` are replaced by `.route()`.
If using global `fetch` you will also need to call `.mockGlobal()` at least once per test suite.
- The `.sandbox()` method previously created a `fetch` function that also had all the fetch-mock methods attached. This is no longer the case, but pulling it apart is complex and deliberately left out of scope for thsi codemod.
- Any uses of fetch-mock prior to assignig to a variable will not be modified e.g. `require('fetch-mock').mock('a', 'b')` will not be converted to `require('fetch-mock').route('a', 'b')`
- The `.sandbox()` method previously created a `fetch` function that also had all the fetch-mock methods attached. This is no longer the case, but pulling it apart is complex and deliberately left out of scope for this codemod.
- Any uses of fetch-mock prior to assigning to a variable will not be modified e.g. `require('fetch-mock').mock('a', 'b')` will not be converted to `require('fetch-mock').route('a', 'b')`
- When using a pattern such as `jest.mock('node-fetch', () => require('fetch-mock').sandbox())`, the codemod is unable to identify that `require('node-fetch')` will be an instance of fetch-mock.
- On the server side fetch-mock was previously built around node-fetch's classes, but now uses native `fetch`. In most cases, even if your application code still uses node-fetch, your mocks will still work. However, if you explicitly create instances of `Request` or `Headers` using node-fetch's classes, you may need to provide these to fetch-mock.

Taking the last 3 points together, this example illustrates the kind of manual modifications required:
Taking the last 4 points together, this example illustrates the kind of manual modifications required:

### Before

Expand All @@ -43,7 +53,18 @@ it('runs a test', () => {
```js
const fetchMock = require('fetch-mock');

jest.mock('node-fetch', () => fetchMock.fetchHandler);
jest.mock('node-fetch', () => {
const nodeFetch = jest.requireActual('node-fetch');
// only needed if your application makes use of Response, Request
// or Headers classes directly
Object.assign(fetchMock.config, {
fetch: nodeFetch,
Response: nodeFetch.Response,
Request: nodeFetch.Request,
Headers: nodeFetch.Headers,
});
return fetchMock.fetchHandler;
});
const nodeFetch = require('node-fetch');

it('runs a test', () => {
Expand All @@ -52,10 +73,3 @@ it('runs a test', () => {
expect(fetchMock.called()).toBe(true);
});
```

## Usage

1. Do all your manual mods
2. run
3. correct all errors
If you use `.sandbox()` or other mocing libraries to assign fetch-mock to
4 changes: 0 additions & 4 deletions packages/codemods/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@
"name": "@fetch-mock/codemods",
"description": "Codemods for upgrading fetch-mock",
"version": "0.0.0",
"exports": {
"import": "./src/index.js"
},
"main": "./src/index.js",
"module": "./src/index.js",
"type": "module",
"engines": {
"node": ">=18.11.0"
Expand Down
3 changes: 1 addition & 2 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,5 @@
"target": "es2021"
},
"include": ["./packages/**/src/*.ts"],
"exclude": ["node_modules", "packages/**/__tests__"],
"ts-node": {"esm": true}
"exclude": ["node_modules", "packages/**/__tests__"]
}

0 comments on commit 517a6ac

Please sign in to comment.