Add Remix Example #99
Conversation
✅ Deploy Preview for jest-preview-library ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
examples/remix/README.md
Outdated
| ## Install Jest | ||
|
|
||
| You have to manually install Jest in your Remix app. |
There was a problem hiding this comment.
I think the main concentrate of this guide is how to integrate Jest Preview to remix. However, they need to configure Jest to work with Remix first. I suggest you create a repository/ blog post on your own to guide others to setup Jest with Remix standalone, then refer to the link here.
In this guideline, just keep it as concise as possible.
examples/remix/README.md
Outdated
| Install Babel | ||
|
|
||
| ```bash | ||
| npm install --save-dev @babel/preset-env @babel/preset-react babel-jest | ||
| ``` | ||
|
|
||
| Config Babel inside `babel.config.js` | ||
|
|
||
| ```bash | ||
| module.exports = { | ||
| presets: [ | ||
| ['@babel/preset-env', { targets: { node: 'current' } }], | ||
| ['@babel/preset-react', { runtime: 'automatic' }], | ||
| ], | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
Since jest-preview is advocating for @swc-project (because of the speed gain). I think we should setup Jest with https://github.com/swc-project/jest. Refer to https://github.com/nvh95/jest-preview/blob/f0ef957bf89cbe9f0f94389ccf37d33e53b8a6f8/.swcrc and
Line 14 in 30ba86e
examples/remix/README.md
Outdated
| Enable Jest Preview inside `jest.config.js`. The config options are largely up to you, but remember to remove/add the highlighted options as followed so Jest Preview could work properly. | ||
|
|
||
| ```diff | ||
| module.exports = { | ||
| collectCoverageFrom: [ | ||
| '**/*.{js,jsx,ts,tsx}', | ||
| '!**/*.d.ts', | ||
| '!**/node_modules/**', | ||
| ], | ||
| moduleNameMapper: { | ||
| - // Handle CSS imports (with CSS modules) | ||
| - // https://jestjs.io/docs/webpack#mocking-css-modules | ||
| - '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy', | ||
| - | ||
| - // Handle CSS imports (without CSS modules) | ||
| - '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js', | ||
| - | ||
| - // Handle image imports | ||
| - // https://jestjs.io/docs/webpack#handling-static-assets | ||
| - '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`, |
There was a problem hiding this comment.
I think users usually want to copy-paste the very looong configuration, so if we change the markdown from diff to js, it would be very helpful. One more thing is code block on www.jest-preview.com and GitHub have the copy button, so it would help users a lot
One suggestion is to put your message in the comments.
examples/remix/README.md
Outdated
| // (Optional) Enable autoPreview so Jest Preview runs automatically | ||
| // whenever your test fails, without you having to do anything! | ||
| // autoPreview: true, |
There was a problem hiding this comment.
We can enable it by default if there is no problem yet. It will be the default option soon anyway.
examples/remix/README.md
Outdated
| }, | ||
| transformIgnorePatterns: [ | ||
| '/node_modules/', | ||
| - '^.+\\.module\\.(css|sass|scss)$', | ||
| ], | ||
| }; | ||
| ``` | ||
|
|
||
| Configure Jest Preview inside `jest.setup.js` (or any setup files specified in your `setupFilesAfterEnv` config), so Jest Preview knows which global CSS file to load. You can even set `autoPreview` to `true` so your failed test gets a preview automatically! 🤯 | ||
|
|
||
| ```js | ||
| import { jestPreviewConfigure } from 'jest-preview'; | ||
|
|
||
| jestPreviewConfigure({ | ||
| // An array of relative paths from the root of your project | ||
| externalCss: [ | ||
| 'app/styles/global.css', |
There was a problem hiding this comment.
Too much manually configure. Can we create a CLI such as in #102. Can consider that option in the future PR
examples/remix/jest.setup.js
Outdated
| // (Optional) Enable autoPreview so you get previewing for free, | ||
| // automatically without having to call debug(), whenever your test fails. | ||
| // autoPreview: true, |
There was a problem hiding this comment.
In my opinion, this option should be enabled by default 😂
| // appDirectory: "app", | ||
| // assetsBuildDirectory: "public/build", | ||
| // serverBuildPath: "build/index.js", | ||
| // publicPath: "/build/", |
There was a problem hiding this comment.
@thanhsonng Are those code from the template or you commented out them?
Issue: #80
Chores
main, Remix example stops working (probably because I forgot to rebuild the source)Notes