From d9b690ddf2c17ef0b55051033b5750f063b6326a Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 31 Mar 2023 15:11:14 -0400 Subject: [PATCH] chore: restructure sections --- docs/react/testing/introduction.md | 6 +--- .../testing/{ => unit-testing}/examples.md | 0 .../react/testing/{ => unit-testing}/setup.md | 14 +++----- sidebars.js | 36 +++++++------------ 4 files changed, 19 insertions(+), 37 deletions(-) rename docs/react/testing/{ => unit-testing}/examples.md (100%) rename docs/react/testing/{ => unit-testing}/setup.md (92%) diff --git a/docs/react/testing/introduction.md b/docs/react/testing/introduction.md index c752ca59093..05ba658d6b3 100644 --- a/docs/react/testing/introduction.md +++ b/docs/react/testing/introduction.md @@ -36,10 +36,6 @@ There are two types of tests that can be written: [**Playwright**](https://playwright.dev): Playwright is a browser automation library that's used to run end-to-end tests. It allows developers to test the entire application, including the user interface, in a simulated environment. -## Conclusion - -Testing is an important part of the development process, and React provides a robust set of tools and libraries for testing applications. By writing and running tests, you can ensure that your application is working as intended and catch bugs before they reach production. - -### Additional Resources +## Additional Resources - [Testing Ionic React Apps with Jest and React Testing Library](https://ionicframework.com/blog/testing-ionic-react-apps-with-jest-and-react-testing-library/) diff --git a/docs/react/testing/examples.md b/docs/react/testing/unit-testing/examples.md similarity index 100% rename from docs/react/testing/examples.md rename to docs/react/testing/unit-testing/examples.md diff --git a/docs/react/testing/setup.md b/docs/react/testing/unit-testing/setup.md similarity index 92% rename from docs/react/testing/setup.md rename to docs/react/testing/unit-testing/setup.md index 99c544f3509..a38d73af6ce 100644 --- a/docs/react/testing/setup.md +++ b/docs/react/testing/unit-testing/setup.md @@ -4,13 +4,11 @@ title: Ionic React Unit Testing Setup description: Learn how to set up unit tests for an Ionic React application. --- -# Setup +# Unit Testing Setup Ionic requires a few additional steps to set up unit tests. -## Install Jest - -### React Scripts +## Jest If your React project is using `react-scripts`, jest is already installed. You can confirm the version of Jest by running: @@ -24,7 +22,7 @@ Ionic recommends `react-scripts@5` and requires a minimum version of `jest@27`, npm install react-scripts@latest ``` -## Install React Testing Library +### Install React Testing Library React Testing Library is a set of utilities that make it easier to test React components. It's used to interact with components and test their behavior. @@ -32,7 +30,7 @@ React Testing Library is a set of utilities that make it easier to test React co npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event ``` -## Initialize Ionic React +### Initialize Ionic React Ionic React requires the `setupIonicReact` function to be called before any tests are run. Failing to do so will result in mode-based classes and platform behaviors not being applied to your components. @@ -44,12 +42,10 @@ import { setupIonicReact } from '@ionic/react'; setupIonicReact(); ``` -## Test Environment +### Test Environment Ionic requires a DOM environment to be available in order to render components. This is typically provided by the `jsdom` test environment. In Jest 27 and later, the default environment is `node`. -### React Scripts - To configure this behavior, update your `test` command to include `--env=jsdom`: ```json title="package.json" diff --git a/sidebars.js b/sidebars.js index 373992b887d..b6a1a526a39 100644 --- a/sidebars.js +++ b/sidebars.js @@ -10,12 +10,7 @@ module.exports = { type: 'category', label: 'Upgrade Guides', collapsed: false, - items: [ - 'updating/7-0', - 'updating/6-0', - 'updating/5-0', - 'updating/4-0' - ] + items: ['updating/7-0', 'updating/6-0', 'updating/5-0', 'updating/4-0'], }, { type: 'category', @@ -30,7 +25,7 @@ module.exports = { 'developing/tips', 'developing/hardware-back-button', 'developing/keyboard', - 'developing/config' + 'developing/config', ], }, { @@ -45,7 +40,7 @@ module.exports = { href: '/docs/api/grid', }, 'layout/global-stylesheets', - 'layout/css-utilities' + 'layout/css-utilities', ], }, { @@ -129,9 +124,13 @@ module.exports = { type: 'category', label: 'Testing', items: [ - 'react/testing/introduction', - 'react/testing/setup', - 'react/testing/examples' + 'react/testing/introduction', + { + type: 'category', + label: 'Unit Testing', + collapsed: false, + items: ['react/testing/unit-testing/setup', 'react/testing/unit-testing/examples'], + }, ], }, 'react/performance', @@ -237,7 +236,7 @@ module.exports = { href: 'https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md', }, 'reference/support', - 'reference/browser-support' + 'reference/browser-support', ], }, ], @@ -370,12 +369,7 @@ module.exports = { type: 'category', label: 'Media', collapsed: false, - items: [ - 'api/avatar', - 'api/icon', - 'api/img', - 'api/thumbnail', - ], + items: ['api/avatar', 'api/icon', 'api/img', 'api/thumbnail'], }, { type: 'category', @@ -528,11 +522,7 @@ module.exports = { type: 'category', label: 'Getting Started', collapsed: false, - items: [ - 'native', - 'native-setup', - 'native-faq', - ], + items: ['native', 'native-setup', 'native-faq'], }, { type: 'category',