diff --git a/website/docs/api/debug.md b/website/docs/api/debug.md index b59f6f30..055aaa45 100644 --- a/website/docs/api/debug.md +++ b/website/docs/api/debug.md @@ -8,7 +8,7 @@ Preview application's UI when testing with Jest to an external browser. Need to :::info -[Automatic Mode](/blog/automatic-mode) is now available and is recommended for general use, instead of manually triggering `preview.debug()` +[Automatic Mode](/blog/automatic-mode) is now available and is recommended for general use, instead of manually triggering `preview.debug()`. ::: ```diff diff --git a/website/docs/getting-started/installation.md b/website/docs/getting-started/installation.md index 65098622..0bf82be5 100644 --- a/website/docs/getting-started/installation.md +++ b/website/docs/getting-started/installation.md @@ -85,3 +85,11 @@ jestPreviewConfigure({ publicFolder: 'static', // No need to configure if `publicFolder` is `public` }); ``` + +### 5. (Optional- RECOMMENDED) Opt-in to Automatic Mode + +**Automatic Mode** let you use [jest-preview](https://www.npmjs.com/package/jest-preview) without manually triggering `preview.debug()`. It previews your code in the browser automatically whenever there is a failed test. It's a experimental feature from v0.2.0 and becomes the default in v0.3.0. + +```js +jestPreviewConfigure({ autoPreview: true }); +``` diff --git a/website/docs/getting-started/usage.md b/website/docs/getting-started/usage.md index 2cdea8af..a7270299 100644 --- a/website/docs/getting-started/usage.md +++ b/website/docs/getting-started/usage.md @@ -4,6 +4,11 @@ sidebar_position: 6 # Usage +:::info + +[Automatic Mode](/blog/automatic-mode) is now available and is recommended for general use, instead of manually triggering `preview.debug()`. +::: + ### 1. Update to `package.json` ```json @@ -57,8 +62,27 @@ describe('App', () => { }); ``` -Then visit http://localhost:3336 to see the preview +Then visit http://localhost:3336 to see the preview.
+ +If you opt-in to [Automatic Mode](/blog/automatic-mode), Jest Preview will automatically preview your app UI in a browser whenever there is a failed test. + +```js +describe('Demo', () => { + it('should work as expected', () => { + render(
+ +