Integrate with API mocking (https://mswjs.io/)

[jellydn]

What

• Integrate with API mocking (https://mswjs.io/)

Why

• ReactPreview is quite useful for presentation/pure components but it would be great if we could integrate with mock API.

How

• Add a new config on reactpreview.config.js, e.g:

...
mockAPI: true, // this will change the way for fetching data from mock api

Let me know if you have any feedback on this. Thanks.

[fwouts]

Thank you for the suggestion! This isn't something I'd consider at this stage, but it might be a useful plugin idea, once React Preview has a plugin API :)

[jellydn]

Ok, no problem. The MSW integration works for me as below config. It works out of the box.

// _reactpreview__/Wrapper.tsx
import React from 'react';

import { worker } from '../mocks/browser';
import '../styles/index.css';

worker.start();

export const Wrapper: React.FC = ({ children }) => <>{children}</>;
export default {
  Wrapper,
};

[fwouts]

Oh wow, that's neat!

[fwouts]

@jordanarldt The wrapper file is now __previewjs__/Wrapper.tsx (this question was asked back when it was still called React Preview). See https://previewjs.com/docs/config/wrapper for more info. Does this help?

[jordanarldt]

@fwouts thanks for your fast reply. I actually deleted my comment cause I realized was missing a vital step in MSWJS :D

I forgot to run npx msw init public/ before adding my mock worker to the Wrapper file.