CRA + Chakra UI with Cypress 10

create-react-app-chakra-ui/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

create-react-app-chakra-ui/README.md

@@ -0,0 +1,61 @@
+# Component Testing Example: Chakra UI
+
+This project was bootstrapped with
+[Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br /> Open
+[http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br /> You will also see any lint errors
+in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br /> See the section
+about
+[running tests](https://facebook.github.io/create-react-app/docs/running-tests)
+for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br /> It correctly bundles
+React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br /> Your app is
+ready to be deployed!
+
+See the section about
+[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
+more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can
+`eject` at any time. This command will remove the single build dependency from
+your project.
+
+Instead, it will copy all the configuration files and the transitive
+dependencies (webpack, Babel, ESLint, etc) right into your project so you have
+full control over them. All of the commands except `eject` will still work, but
+they will point to the copied scripts so you can tweak them. At this point
+you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for
+small and middle deployments, and you shouldn’t feel obligated to use this
+feature. However we understand that this tool wouldn’t be useful if you couldn’t
+customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the
+[Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

create-react-app-chakra-ui/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+const { devServer } = require("@cypress/react/plugins/react-scripts");
+
+module.exports = defineConfig({
+  component: {
+    devServer,
+    specPattern: "src/**/*.cy.{js,jsx,ts,tsx}",
+  },
+});