Merge pull request #829 from wheresrhys/rhys/codemod

Rhys/codemod

eslint.config.js

@@ -11,12 +11,15 @@ export default [
  ignores: [
  'docs/**/*.js',
  'packages/*/test/fixtures/*',
+ 'packages/**/__tests__/fixtures/*',
  '**/dist/**/*',
  'packages/fetch-mock/types/index.test-d.ts',
  ],
  },
  eslint.configs.recommended,
- ...tseslint.configs.recommended,
+ ...tseslint.configs.recommended.map((config) => {
+ return { ...config, ignores: ['packages/codemods/**'] };
+ }),
  eslintConfigPrettier,
  {
  rules: {

package.json

@@ -34,7 +34,7 @@
  "test": "vitest . --ui --exclude=packages/jest/src/__tests__/*",
  "test:ci": "vitest . --reporter=junit --outputFile=test-results/junit.xml --coverage.provider=istanbul --exclude=packages/jest/src/__tests__/*",
  "test:jest": "node --experimental-vm-modules node_modules/jest/bin/jest.js packages/jest",
- "test:browser": "vitest . --browser.enabled --browser.name chromium --browser.provider playwright --exclude=packages/jest/src/__tests__/*",
+ "test:browser": "vitest . --browser.enabled --browser.name chromium --browser.provider playwright --exclude=packages/{jest,codemods}/src/__tests__/*",
  "coverage:send": "cat ./coverage/lcov.info | coveralls",
  "compat:module": "npm run compat:module -w import-compat"
  },

packages/codemods/.npmignore

@@ -0,0 +1 @@
+try.js

packages/codemods/README.md

@@ -0,0 +1,75 @@
+# @fetch-mock/codemods
+
+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. **Note that the parser option should not be used as @fetch-mock/codemods forces use of the TSX parser in order to ensure compatibility with teh greatest range of projects**.
+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`
+- Rewrites `.mock()` to `.route()`
+- Rewrites `.reset()`, `.restore()`, `.resetBehavior()` and `.resetHistory()` to their equivalents in fetch-mock@12
+- Rewrites `.lastUrl()`, `.lastOptions()` and `lastResponse()` to their equivalents in fetch-mock@12
+- Adds an informative error whenever `.lastCall()` or `.calls()` are used with advice on how to manually correct these
+- Converts `.getOnce()`, `.getAnyOnce()`, `.postOnce()` etc... - which have been removed - to calls to the underlying `.get()` method with additional options passed in.
+- Removes uses of the deprecated options `overwriteRoutes`, `warnOnFallback`, `sendAsJson`
+- Removes uses of the deprecated `fallbackToNetwork` option, and adds an informative error with details of how to replace with the `spyGlobal()` method
+
+## Limitations/Out of scope
+
+- 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 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 4 points together, this example illustrates the kind of manual modifications required:
+
+### Before
+
+```js
+jest.mock('node-fetch', () => require('fetch-mock').sandbox());
+
+const nodeFetch = require('node-fetch');
+
+it('runs a test', () => {
+ nodeFetch.get('http://a.com', 200);
+ myAPI.call();
+ expect(nodeFetch.called()).toBe(true);
+});
+```
+
+### After
+
+```js
+const fetchMock = require('fetch-mock');
+
+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', () => {
+ fetchMock.get('http://a.com', 200);
+ myAPI.call();
+ expect(fetchMock.called()).toBe(true);
+});
+```

packages/codemods/package.json

@@ -0,0 +1,27 @@
+{
+ "name": "@fetch-mock/codemods",
+ "description": "Codemods for upgrading fetch-mock",
+ "version": "0.0.0",
+ "main": "./src/index.js",
+ "type": "commonjs",
+ "engines": {
+ "node": ">=18.11.0"
+ },
+ "repository": {
+ "directory": "packages/codemods",
+ "type": "git",
+ "url": "git+https://github.com/wheresrhys/fetch-mock.git"
+ },
+ "scripts": {
+ "build": "echo 'no build'"
+ },
+ "license": "MIT",
+ "author": "Rhys Evans",
+ "bugs": {
+ "url": "https://github.com/wheresrhys/fetch-mock/issues"
+ },
+ "homepage": "http://www.wheresrhys.co.uk/fetch-mock",
+ "dependencies": {
+ "jscodeshift": "^17.0.0"
+ }
+}

packages/codemods/src/__tests__/fixtures/extra-vars.js

@@ -0,0 +1,4 @@
+const fetchMock = require('fetch-mock');
+fetchMock.mock('blah', 200);
+fm1.mock('blah', 200);
+fm2.mock('blah', 200);

packages/codemods/src/__tests__/fixtures/jsx.jsx

@@ -0,0 +1,2 @@
+import fetchMock from 'fetch-mock';
+fetchMock.mock("blah", <div>Content</div>);

packages/codemods/src/__tests__/fixtures/tsx.tsx

@@ -0,0 +1,4 @@
+import fetchMock from 'fetch-mock';
+function helper (res: number): void {
+ fetchMock.mock("blah", <div>Content</div>);
+};

packages/codemods/src/__tests__/fixtures/typescript.ts

@@ -0,0 +1,4 @@
+import fetchMock from 'fetch-mock';
+function helper (res: number): void {
+ fetchMock.mock("blah", res);
+};

packages/codemods/src/__tests__/identifying-fetchmock-instances.test.js

@@ -0,0 +1,94 @@
+import { describe, it, expect } from 'vitest';
+import { codemod } from '../index';
+import jscodeshift from 'jscodeshift';
+
+function expectCodemodResult(src, expected) {
+ expect(codemod(src, jscodeshift)).toEqual(expected);
+}
+
+describe('identifying fetch-mock instances', () => {
+ it('cjs require() named fetchMock', () => {
+ expectCodemodResult(
+ `
+const fetchMock = require('fetch-mock');
+fetchMock.mock("blah", 200)
+`,
+ `
+const fetchMock = require('fetch-mock');
+fetchMock.route("blah", 200)
+`,
+ );
+ });
+ it('cjs require() named something else', () => {
+ expectCodemodResult(
+ `
+const fetchNot = require('fetch-mock');
+fetchNot.mock("blah", 200)
+`,
+ `
+const fetchNot = require('fetch-mock');
+fetchNot.route("blah", 200)
+`,
+ );
+ });
+ it('esm import named fetchMock', () => {
+ expectCodemodResult(
+ `
+import fetchMock from 'fetch-mock';
+fetchMock.mock("blah", 200)
+`,
+ `
+import fetchMock from 'fetch-mock';
+fetchMock.route("blah", 200)
+`,
+ );
+ });
+ it('esm import named something else', () => {
+ expectCodemodResult(
+ `
+import fetchNot from 'fetch-mock';
+fetchNot.mock("blah", 200)
+`,
+ `
+import fetchNot from 'fetch-mock';
+fetchNot.route("blah", 200)
+`,
+ );
+ });
+ it.skip('unassigned instances of require("fetch-mock")', () => {
+ expectCodemodResult(
+ `require('fetch-mock').mock("blah", 200)`,
+ `require('fetch-mock').route("blah", 200)`,
+ );
+ });
+ it.skip('sandbox() instances', () => {
+ expectCodemodResult(
+ `
+const fetchMock = require('fetch-mock');
+const fm = fetchMock.sandbox();
+fm.mock("blah", 200)
+`,
+ `
+const fetchMock = require('fetch-mock');
+const fm = fetchMock.sandbox();
+fm.route("blah", 200)
+`,
+ );
+ });
+ it.skip('sandbox() instances used by jest / vitest.mock', () => {});
+ it.skip('identify multiple instances on a page e.g. fetchMock and fm=fetchMock.sandbox()', () => {});
+ it.skip('identify when a fm instance with lots of chained methods is assigned to a new variable', () => {
+ expectCodemodResult(
+ `
+const fetchMock = require('fetch-mock');
+const fm = fetchMock.get('a', 'b').get('a', 'b');
+fm.mock("blah", 200)
+`,
+ `
+const fetchMock = require('fetch-mock');
+const fm = fetchMock.get('a', 'b').get('a', 'b');
+fm.route("blah", 200)
+`,
+ );
+ });
+});

packages/codemods/src/__tests__/integration.test.js

@@ -0,0 +1,42 @@
+import { it, describe, expect } from 'vitest';
+import { promisify } from 'node:util';
+import { exec as callbackExec } from 'node:child_process';
+const exec = promisify(callbackExec);
+
+describe('integration', () => {
+ it('can operate on typescript', async () => {
+ const { stdout } = await exec(
+ 'jscodeshift --parser ts -p -d -t ./packages/codemods/src/index.js ./packages/codemods/src/__tests__/fixtures/typescript.ts',
+ );
+ expect(stdout).toContain(`import fetchMock from 'fetch-mock';
+function helper (res: number): void {
+ fetchMock.route("blah", res);
+}`);
+ });
+ it('can operate on jsx', async () => {
+ const { stdout } = await exec(
+ 'jscodeshift --parser ts -p -d -t ./packages/codemods/src/index.js ./packages/codemods/src/__tests__/fixtures/jsx.jsx',
+ );
+ expect(stdout).toContain(`import fetchMock from 'fetch-mock';
+fetchMock.route("blah", <div>Content</div>);`);
+ });
+
+ it('can operate on tsx', async () => {
+ const { stdout } = await exec(
+ 'jscodeshift --parser ts -p -d -t ./packages/codemods/src/index.js ./packages/codemods/src/__tests__/fixtures/tsx.tsx',
+ );
+ expect(stdout).toContain(`import fetchMock from 'fetch-mock';
+function helper (res: number): void {
+ fetchMock.route("blah", <div>Content</div>);
+}`);
+ });
+ it('allow passing in one or more additional variable names for fetch-mock', async () => {
+ const { stdout } = await exec(
+ 'FM_VARIABLES=fm1,fm2 jscodeshift --parser ts -p -d -t ./packages/codemods/src/index.js ./packages/codemods/src/__tests__/fixtures/extra-vars.js',
+ );
+ expect(stdout).toContain(`const fetchMock = require('fetch-mock');
+fetchMock.route('blah', 200);
+fm1.route('blah', 200);
+fm2.route('blah', 200);`);
+ });
+});