Upgrade Jest website to Docusaurus v3 #14463

slorber · 2023-08-31T17:09:16Z

PR to upgrade to Docusaurus v3 canary

See also: Prepare website docs content for MDX v2 and Docusaurus v3

Deploy preview: https://deploy-preview-14463--jestjs.netlify.app/

Argos visual tests

✅ Deploy Preview for jestjs ready!

Name	Link
🔨 Latest commit	`e393b3a`
🔍 Latest deploy log	https://app.netlify.com/sites/jestjs/deploys/64f9db90cb045f0008e91706
😎 Deploy Preview	https://deploy-preview-14463--jestjs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

website/package.json

slorber

Ready to review 🎉

The visual diff reported by Argos between prod and PR looks minimal and mostly false positives
(sometimes it's very subtle and related to font anti-aliasing rendering)

https://app.argos-ci.com/slorber/jest-website-visual-tests

Note, one of the diffs reported is related to a typo that will be fixed by another PR: #14466

slorber · 2023-09-01T14:43:03Z

README.md

-<details><summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>
+<details>
+  <summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>


In MDX v2 this does not compile.
This is the readme though so not a big deal but I updated it too because mdx docs have the exact same content.

This change can be moved to a preparation PR and would work with both MDX v1 and v2

slorber · 2023-09-01T14:46:14Z

docs/Configuration.md

-  If you are seeing coverage output such as...
+
+If you are seeing coverage output such as...


In MDX v2 not having a line break will wrap the summary in an extra useless paragraph. This leads browsers to ignore the nested summary tag and display the default label instead of the provided one.

CF problem reported by Argos here: https://app.argos-ci.com/slorber/jest-website-visual-tests/builds/11/56882867

This change can be moved to a preparation PR and would work with both MDX v1 and v2

docs/Configuration.md

slorber · 2023-09-01T14:46:43Z

docs/GettingStarted.md

-<details><summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>
+<details>
+  <summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>


In MDX v2 this does not compile.

This change can be moved to a preparation PR and would work with both MDX v1 and v2

slorber · 2023-09-01T14:49:36Z

docs/MockFunctionAPI.md

-:::warning
+:::danger


:::warning is a legacy Docusaurus admonition alias that is not documented, see https://docusaurus.io/docs/markdown-features/admonitions

Issue reported by Argos due to default label change: https://app.argos-ci.com/slorber/jest-website-visual-tests/builds/11/56882879

Using :::danger is the official red admonition name, keep the same label as before

Note: we are going to reintroduce :::warning soon, but it will be yellow instead of red (facebook/docusaurus#7558)

I think we wanted this to be yellow. That doesn't currently exist?

The yellow admonition is currently :::caution.

I'd suggest to change that in another PR: the goal of this PR is to focus on having no regression and not improving things ;)

This change can be moved to a preparation PR and would work with both MDX v1 and v2

yellow is better!!

landed that yesterday #14493

slorber · 2023-09-01T15:10:17Z

docs/Configuration.md

-The path to a module that can resolve test<->snapshot path. This config option lets you customize where Jest stores snapshot files on disk.
+The path to a module that can resolve test\<->snapshot path. This config option lets you customize where Jest stores snapshot files on disk.



In MDX v2 this does not compile. Escaping is a good solution.

@SimenB this can't be extracted as is to a docs prep PR because on MDX v1, \ will stay visible. The only solution that works on MDX v1 + v2 is test<->snapshot which IMHO is much less maintainable compared to \<->.

For this reason I think it's better to keep this change in this PR

SimenB · 2023-09-01T15:26:26Z

The changes for mdx 2 - can they land separately, or do they not work for v1? Just so we reduce this PR down as much as possible down to just the version change

SimenB · 2023-09-01T15:28:41Z

yarn.lock

@@ -5269,6 +5808,17 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/react@npm:>=16, @types/react@npm:^18.2.21":


Seems this is causing issues. Would a dedupe help?

I ran yarn dedupe but it doesn't seem to fix CI failures.

I don't really know what's the problem here 😅 any idea?

Tried to fix it, seems to work but dedupe actually creates problems 😅

slorber · 2023-09-01T22:41:43Z

The changes for mdx 2 - can they land separately, or do they not work for v1? Just so we reduce this PR down as much as possible down to just the version change

I can do that, this is what I did for React-Native (facebook/react-native-website#3780) with 2 "preparation PRs" because there were a lot more content changes to make compared to Jest.

do they not work for v1?

Unfortunately there's a tradeoff, and indeed adapting the content to make it work for both MDX v1 and MDX v2 is not always the "ideal solution".

For example: The path to a module that can resolve test\<->snapshot path.

Under MDX v1: the \n excape char will be displayed, but not in v2.

If you want something that works with both versions, you would have to use a less ideal form: test<->snapshot

So, it's up to you if we should either:

do all the content preparation in upfront PRs, with a less than ideal shared syntax
do most content preparation in upfront PRs, and keep some content changes like the one above for the v3 upgrade PR

This reverts commit b547523.

slorber

Looks like I was able to make all the tests pass.

constraints.pro

slorber · 2023-09-02T17:33:15Z

package.json

@@ -21,6 +21,7 @@
    "@types/babel__template": "^7.0.2",
    "@types/node": "~14.14.45",
    "@types/which": "^3.0.0",
+    "@types/ws": "8.5.1",


Looks like the newer 8.5.5 is causing failures due to a breaking change (a type became non-generic while it was before)

slorber · 2023-09-02T17:34:11Z

package.json

@@ -172,6 +173,7 @@
  },
  "resolutions": {
    "@types/node": "~14.14.45",
+    "@types/react": "^18.2.21",


This is the only way I was able to avoid TS issues. Other alternatives can be explored (reduce hoisting etc) but that looks fine to me?

slorber · 2023-09-02T17:34:42Z

packages/pretty-format/src/__tests__/react.test.tsx

-      React.createElement(Consumer, null, () =>
-        React.createElement('div', null, 'child'),
-      ),
+      React.createElement(Consumer, {
+        children: () => React.createElement('div', null, 'child'),
+      }),
    ),
-  ).toBe('<Context.Consumer>\n  [Function anonymous]\n</Context.Consumer>');
+  ).toBe('<Context.Consumer>\n  [Function children]\n</Context.Consumer>');


With React 18 it seems ReactNode (3rd arg) doesn't accept a function anymore so I replaced it with props.children

SimenB · 2023-09-05T09:46:21Z

do most content preparation in upfront PRs, and keep some content changes like the one above for the v3 upgrade PR

Yeah, that seems ideal 👍

I'll take a look at the React types stuff, but your solution might be the right one

slorber

do most content preparation in upfront PRs, and keep some content changes like the one above for the v3 upgrade PR

Yeah, that seems ideal 👍

Note there are only 3 docs changes, of which only 2 can be moved to a docs preparation PR without bad tradeoffs

All the other docs changes are exactly the same changes, and related to versioned docs.

Do you still want me to extract these 2 docs changes (+ versioned docs) in a separate preparation PR?

slorber · 2023-09-05T09:52:07Z

docs/Configuration.md

-The path to a module that can resolve test<->snapshot path. This config option lets you customize where Jest stores snapshot files on disk.
+The path to a module that can resolve test\<->snapshot path. This config option lets you customize where Jest stores snapshot files on disk.



@SimenB this can't be extracted as is to a docs prep PR because on MDX v1, \ will stay visible. The only solution that works on MDX v1 + v2 is test<->snapshot which IMHO is much less maintainable compared to \<->.

For this reason I think it's better to keep this change in this PR

slorber · 2023-09-05T09:54:17Z

README.md

-<details><summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>
+<details>
+  <summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>


This change can be moved to a preparation PR and would work with both MDX v1 and v2

slorber · 2023-09-05T09:55:16Z

docs/Configuration.md

-  If you are seeing coverage output such as...
+
+If you are seeing coverage output such as...


This change can be moved to a preparation PR and would work with both MDX v1 and v2

slorber · 2023-09-05T09:55:49Z

docs/GettingStarted.md

-<details><summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>
+<details>
+  <summary markdown="span"><strong>Making your Babel config jest-aware</strong></summary>


This change can be moved to a preparation PR and would work with both MDX v1 and v2

slorber · 2023-09-05T09:56:05Z

docs/MockFunctionAPI.md

-:::warning
+:::danger


This change can be moved to a preparation PR and would work with both MDX v1 and v2

SimenB · 2023-09-05T10:15:24Z

I'll take a look at the React types stuff, but your solution might be the right one

Ended up with #14470, so the approach in this PR seems fine for now as that needs to wait for Jest 30.

SimenB · 2023-09-05T10:15:59Z

Do you still want me to extract these 2 docs changes (+ versioned docs) in a separate preparation PR?

Yeah, that'd be great, thanks!

SimenB · 2023-09-06T08:55:22Z

website/package.json

    "react-github-btn": "^1.3.0",
    "react-lite-youtube-embed": "^2.2.2",
    "react-markdown": "^8.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@crowdin/cli": "^3.5.2",
-    "@docusaurus/module-type-aliases": "^2.0.0",
+    "@docusaurus/module-type-aliases": "0.0.0-5658",
    "@tsconfig/docusaurus": "^1.0.5",


maybe bump this as well?

What do you mean? bump to what value?

v2 has been released

??? but it's a Docusaurus dependency, we want it to be v3 (canary) like the other docusaurus dependencies.

All official Docusaurus deps should use the exact same versions.

https://github.com/tsconfig/bases/blob/main/bases/docusaurus.json

Ahh! thought you were talking about the module above.

Actually you are right I forgot something, we are using a new official package @docusaurus/tsconfig now

just remove it based on tsconfig/bases#196?

Ahh! thought you were talking about the module above.

Actually you are right I forgot something, we are using a new official package @docusaurus/tsconfig now

👍

slorber · 2023-09-07T15:25:35Z

Let me know if it looks good to you.

It seems the tests are failing on main now so not sure if this PR is ok or introduces new failures.

It's probably due to Node 20.6 that apparently breaks a few things in the ecosystem.

However this test is failing too: https://github.com/jestjs/jest/actions/runs/6110952563/job/16585434858?pr=14463

Maybe this timeout is expected and it's a flaky test?

SimenB · 2023-09-07T16:15:16Z

Just flake, yeah. And node 20 is broken due to nodejs/node#49497

SimenB

looks great from I can tell from clicking around in the preview. Thanks for doing this!

SimenB · 2023-09-07T16:18:01Z

bless! 😀

SimenB · 2023-09-07T16:19:34Z

hah #14496

github-actions · 2023-10-22T00:08:40Z

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

update package.json

b5b65c2

slorber mentioned this pull request Aug 31, 2023

Visual tests for jest website + Docusaurus v3 slorber/jest-website-visual-tests#1

Open

slorber marked this pull request as draft August 31, 2023 17:17

mrazauskas reviewed Aug 31, 2023

View reviewed changes

website/package.json Outdated Show resolved Hide resolved

slorber added 5 commits September 1, 2023 15:22

v3 deps upgrade

7d3765b

fix mdx docs

1ce379a

Upgrade docusaurus-remark-plugin-tab-blocks

84ff24b

Fix summary/details useless extra paragraph

c306ec5

Replace warning admonition by danger admonition

a1be1c1

slorber commented Sep 1, 2023

View reviewed changes

slorber marked this pull request as ready for review September 1, 2023 14:53

slorber changed the title ~~WIP - Docusaurus v3 upgrade~~ Docusaurus v3 upgrade Sep 1, 2023

slorber changed the title ~~Docusaurus v3 upgrade~~ Upgrade Jest website to Docusaurus v3 Sep 1, 2023

escape instead of html char

1d52d8b

slorber commented Sep 1, 2023

View reviewed changes

SimenB reviewed Sep 1, 2023

View reviewed changes

yarn dedupe

b547523

slorber and others added 7 commits September 2, 2023 00:57

Revert "yarn dedupe"

492ef9d

This reverts commit b547523.

Add explicit monorepo @types deps

9c6517b

Add yarn constraints exception for @types/react

01f9983

Merge branch 'jestjs:main' into slorber/docusaurus-v3

ad898d7

Add React types to Yarn resolutions

2e2b1cb

Fix test TS issue

8cee3d1

Fix test TS issue

e06ede1

slorber commented Sep 2, 2023

View reviewed changes

slorber commented Sep 5, 2023

View reviewed changes

SimenB mentioned this pull request Sep 5, 2023

fix(pretty-format): Handle empty string children in React same as react-test-renderer #14470

Merged

SimenB reviewed Sep 6, 2023

View reviewed changes

SimenB mentioned this pull request Sep 6, 2023

chore(deps): update dependency @tsconfig/docusaurus to v2 #14282

Closed

1 task

slorber mentioned this pull request Sep 7, 2023

Prepare website docs content for MDX v2 and Docusaurus v3 #14492

Merged

SimenB mentioned this pull request Sep 7, 2023

docs: use caution over danger admonition #14493

Merged

slorber added 2 commits September 7, 2023 15:22

Merge branch 'main' into slorber/docusaurus-v3

8642e45

Replace external ts config by official ts config package

e393b3a

slorber requested a review from SimenB September 7, 2023 15:25

SimenB approved these changes Sep 7, 2023

View reviewed changes

SimenB merged commit 9171085 into jestjs:main Sep 7, 2023
76 of 89 checks passed

mrazauskas mentioned this pull request Sep 10, 2023

Support spaces in label names mrazauskas/docusaurus-remark-plugin-tab-blocks#191

Closed

This was referenced Oct 9, 2023

MDX v2 + docusaurus v3 social-embed/social-embed#10

Merged

Docusaurus v3 social-embed/social-embed#11

Closed

github-actions bot locked as resolved and limited conversation to collaborators Oct 22, 2023

		If you are seeing coverage output such as...

		If you are seeing coverage output such as...

		The path to a module that can resolve test<->snapshot path. This config option lets you customize where Jest stores snapshot files on disk.
		The path to a module that can resolve test\<->snapshot path. This config option lets you customize where Jest stores snapshot files on disk.

		:::warning
		:::danger

		:::warning
		:::danger

Upgrade Jest website to Docusaurus v3 #14463

Upgrade Jest website to Docusaurus v3 #14463

Conversation

slorber commented Aug 31, 2023 • edited Loading

netlify bot commented Aug 31, 2023 • edited Loading

✅ Deploy Preview for jestjs ready!

slorber left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SimenB commented Sep 1, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

slorber commented Sep 1, 2023

slorber left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SimenB commented Sep 5, 2023

slorber left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SimenB commented Sep 5, 2023

SimenB commented Sep 5, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

slorber commented Sep 7, 2023 • edited Loading

SimenB commented Sep 7, 2023

SimenB left a comment

Choose a reason for hiding this comment

SimenB commented Sep 7, 2023

SimenB commented Sep 7, 2023

github-actions bot commented Oct 22, 2023

slorber commented Aug 31, 2023 •

edited

Loading

netlify bot commented Aug 31, 2023 •

edited

Loading

slorber left a comment •

edited

Loading

slorber commented Sep 7, 2023 •

edited

Loading