Open spaceFitzpa opened 2 years ago
Are the int & Deduplicate deps on node 10.x and ubuntu-latest
and Test on Node 12.x and ubuntu-latest
checks done automatically or do I need to do something more here. I updated and ran tests locally and every thing is passing.
This did not work for me, I got stuck with a jest
error when trying to run tests after updating to React 18. Instead, I made these changes to successfully update everything to React 18:
/package.json
:
"devDependencies": {
"@babel/core": "^7.18.13",
"@rollup/plugin-image": "^2.1.1",
"@rollup/plugin-replace": "^4.0.0",
"@rollup/plugin-url": "^7.0.0",
"@size-limit/preset-small-lib": "^8.0.1",
"@storybook/addon-essentials": "^6.5.10",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-links": "^6.5.10",
"@storybook/addons": "^6.5.10",
"@storybook/react": "^6.5.10",
"@svgr/rollup": "^6.3.1",
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"babel-loader": "^8.2.5",
"eslint-plugin-jsx-a11y": "^6.6.1",
"husky": "^8.0.1",
"jest-transform-stub": "^2.0.0",
"pinst": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"size-limit": "^8.0.1",
"tsdx": "^0.14.1",
"tslib": "^2.4.0",
"typescript": "^4.8.2"
}
jest config
:
"jest": {
"moduleNameMapper": {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg|mdx)$": "jest-transform-stub"
},
"globals": {
"IS_REACT_ACT_ENVIRONMENT": true
}
}
/example/package.json
: You need to put a $
in front of the alias because it'll conflict with react-dom/client
when trying to using React 18. If you remove the alias entirely, hotreloading stops working. You can use the latest parcel
if you include parcel-bundler
. The dist
folder fills up over time, so I added a soft check to delete it.
{
"name": "example",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "parcel index.html",
"build": "rm -r ./dist | parcel build index.html"
},
"alias": {
"$react-dom": "../node_modules/react-dom/profiling"
},
"devDependencies": {
"parcel": "^2.7.0",
"parcel-bundler": "^1.12.5"
}
}
/example/index.tsx
:
import * as React from "react"
import { createRoot } from "react-dom/client"
import { Thing } from "../."
const App = () => {
return (
<div>
<Thing />
</div>
)
}
const container = document.getElementById("root")
const root = createRoot(container!)
root.render(<App />)
blah.test.tsx
: now using React 18. We're using the act
method to trigger the jest
render to avoid a null
error.
import React from "react"
import { createRoot } from "react-dom/client"
import { act } from "react-dom/test-utils"
import { Default as Thing } from "../stories/Thing.stories"
describe("Thing", () => {
it("renders without crashing", () => {
const container = document.createElement("div")
const root = createRoot(container!)
act(() => root.render(<Thing />))
})
})
react
andreact-with-storybook
example and test files to use React 18's newroot API
ReactDOM.render is no longer supported in React 18
error.