Feature Request: Ability to generate faker mocks independent to msw

[haydencrain]

Hey team 👋

Problem

I'm currently using Orval to generate API clients for a React Native project. However, React Native has limited capability / support for MSW:

• https://github.com/mswjs/msw/issues?q=is%3Aissue%20state%3Aopen%20react%20native
• React Native + Axios mocking mswjs/msw#2369 << this patch has also been flaky to use

I see value out of generating faker-js mocks for my clients. However, when using the tags-split option, they get bundled into the same file alongside msw generated code.

I could rip out the msw dependencies and functions once generated, but it means I'll have to re-do this each time after an API update

Feature request

It would be useful to be able to specify the output.mock.type to be just faker. This will allow me to build out some custom mocking strategy using the mock faker functions, as opposed to relying on msw.

Desired Output

When using tags-split, and something like output.mock.type: 'faker':

 my-app
 └── src
     ├── petstore.schemas.ts
     └── pets
         ├── petstore.mocks.ts
         └── petstore.ts

Will give me just a file that contains the faker-js implementations, and not any msw dependencies

When using tags-split, and output.mock.type: 'msw':

 my-app
 └── src
     ├── petstore.schemas.ts
     └── pets
         ├── petstore.mocks.ts
         ├── petstore.msw.ts
         └── petstore.ts

msw will simply import the mocks from the mocks file

Acknowledgements

1. Reading the documentation it's clear that just generating faker mocks doesn't fulfil the definition of what a "mock" is within an Orval context, as it assumes it also covers the implementation of the mock (i.e. msw or cypress etc.)
2. Many of the current configuration specified in output.mock are redundant for a mock.type: 'faker'

[haydencrain]

If anyone else is looking for a quick workaround, I created a jscodeshift codemod that scrubs out msw functions / dependency imports

$ find src -iname '*.msw.ts' -print | xargs jscodeshift -t codemod/clean_orval_msw.ts --extensions=ts --parser=ts --print

// codemod/clean_orval_msw.ts

import { API, ASTPath, FileInfo, VariableDeclaration } from 'jscodeshift';

export default function transformer(file: FileInfo, api: API) {
  const j = api.jscodeshift;
  const root = j(file.source);
 
  // removes the 'msw' dependency import
  root
    .find(j.ImportDeclaration)
    .filter((path) => path.value.source.value === 'msw')
    .remove();
 
  // removes the 'getFooMockHandler' functions, but leaves a `export {}` declaration
  root
    .find(j.VariableDeclaration)
    .filter((path) => {
      const name = maybeGetMockHandlerFunctionName(path);
      return name != null;
    })
    .forEach((path) => {
      const name = maybeGetMockHandlerFunctionName(path);
      // removes usages of each `getFooMockHandler` method
      root
        .find(j.CallExpression)
        .filter((callPaths) => {
          const callee = callPaths.value.callee;
          if (callee.type !== 'Identifier') {
            return false;
          }
          return callee.name === name;
        })
        .remove();
    })
    .remove();


  // removes the // removes the `export {}` declarations
  root
    .find(j.ExportNamedDeclaration)
    .filter((path) => path.value.declaration == null)
    .remove();

  return root.toSource();
}

function maybeGetMockHandlerFunctionName(path: ASTPath<VariableDeclaration>): string | undefined {
  const declaration = path.value.declarations[0];
  if (declaration.type !== 'VariableDeclarator') {
    return undefined;
  }
  const id = declaration.id;
  if (id.type !== 'Identifier') {
    return undefined;
  }
  if (!id.name.endsWith('MockHandler')) {
    return undefined;
  }
  return id.name;
}