feat: implement auto preview on error

[nvh95]

Features

• Auto preview on test fails (experimental)
• Update docs for autoPreview option
• Add blog post announce new feature
• Add to FAQ section if user experience error (undefined variable?) wants to opt-out.

Chores

• Use node 16 for docusaurus website

[netlify]

✅ Deploy Preview for jest-preview-library canceled.

Name	Link
🔨 Latest commit	99031d7
🔍 Latest deploy log	https://app.netlify.com/sites/jest-preview-library/deploys/62715516dfb88400098a9286

[nvh95]

@thanhsonng Can you double-check the implementation? Also, I rebased some of your commits, so please notice if you need to push to this branch. Thanks

[nvh95]

This implementation's currently not working yet.
Tests always pass and it does not preview the failed test automatically.
Need to investigate more.

[thanhsonng]

Opportunity to improve: We can write a helper function to detect an async function, that will make TypeScript happy and doesn't require type assertion here. I will add an example below.

[nvh95]

@thanhsonng I'm waiting for your example. You can commit directly as well if you want.

[thanhsonng]

Turns out it is not easy to achieve. We need to inspect the return value, i.e. we must call the callback function first.
On the other hand, checking callback.constructor.name === 'AsyncFunction' is not enough IMO. We actually want to check if the function return a Promise.

So I propose something like this. We always await for callback's return value, regardless of its signature, and we make callbackWithPreview always return a Promise.

if (!callback) {
  callbackWithPreview = undefined;
} else {
  callbackWithPreview = async (...args: Parameters<jest.ProvidesCallback>) => {
    try {
      // @ts-ignore
      return await callback(...args);
    } catch (error) {
      debug();
      throw error;
    }
  }
}

[nvh95]

checking callback.constructor.name === ‘AsyncFunction’ is not enough IMO. We actually want to check if the function return a Promise.

Can you elaborate why we need to check if the function return a Promise, instead of checking the function is an async function?

So I propose something like this. We always await for callback’s return value, regardless of its signature, and we make callbackWithPreview always return a Promise.

I did try it before this and it works actually (not well tested yet). However, I have a few opening questions I haven’t had answers yet:

1. Is there any issues regarding the rightness when we always converting sync => async?
2. Is there any performance issues when we always use async (even when not needed)?

[thanhsonng]

Can you elaborate why we need to check if the function return a Promise, instead of checking the function is an async function?

An async function is just syntactic sugar for functions that return a promise. Jest allows user to write functions that return a promise without using async/await syntax, so we must account for that case as well. This link is for reference: https://jestjs.io/docs/tutorial-async.

I did try it before this and it works actually (not well tested yet). However, I have a few opening questions I haven’t had answers yet:

1. Is there any issues regarding the rightness when we always converting sync => async?
2. Is there any performance issues when we always use async (even when not needed)?

I believe those are non-issues but you shouldn't take my words for it. I will do some research about these questions. 😂

[nvh95]

Lemme do a benchmark.

[nvh95]

@thanhsonng I did a benchmark and the running time is very similar. So I will go with always async approach.

[nvh95]

This implementation's currently not working yet.
Tests always pass

Since we are missing a return in line 96

and it does not preview the failed test automatically.

callback can be an async function, so just try catch is not enough, we need to await the callback and return the result. Otherwise, it never reaches catch block (line 97-100), then it never automatically preview UI if we writing something like:

it('test name', async () => {
  // Never automatic preview if test fail
})

cc: @thanhsonng