wrapito 13.0.0-beta1 → 13.0.0

package/README.md

@@ -6,6 +6,21 @@ Wrap you tests so that you can test both behaviour and components with less effo
 
 This version is agnostic and compatible with both [jest](https://jestjs.io/) and [vitest](https://vitest.dev/).
 
+### Note:
+
+From the version 13 wrapito is compatible with the new version of React and requires such versions of dependencies:
+
+```
+"peerDependencies": {
+    "@testing-library/jest-dom": ">=5.16.4",
+    "@testing-library/react": ">=14.0.0",
+    "react-dom": ">=18.0.0",
+    "react": ">=18.0.0"
+  }
+```
+
+If your project uses React <=18.0.0, you can use wrapito <=12, but we extremely recommend to migrate to newest versions, because we are not maintaining legacy dependencies.
+
 ## 🎯 Motivation
 
 As we are more focused on user interactions than implementation details. In order to test all the user interactions that
@@ -21,8 +36,6 @@ As we test our app we will be in two different scenarios where:
   returns (renders) the expected result.
 
 In general, if you want to test behaviour, you need to simulate external actions from user or from http responses.
-Most of the existing testing libraries give you control of the user actions and thats why we just ask you to set in the
-config what is the `render` function of your testing library.
 Unfortunately, there aren't so many options when it comes to manage http requests and responses in the tests.
 To give the mounted component context about which path is the current path where the app should be mounted, what props
 does the component receive, what http requests will respond with which results or where should the portal be mounted we
@@ -46,40 +59,29 @@ const myWrappedComponent = wrap(MyComponent).mount()
 
 ## 👣 Initial setup
 
-Because 🌯 `wrapito` doesn't want to know anything about how the components are mounted in the project that uses it, we
-can specify how we will `mount` our components by passing the rendering/mounting function of our library of preference.
-This way we make `wrapito` a little bit more agnostic. For example `setup.wrapito.js`
+In the latest version of 🌯 `wrapito` passing the rendering/mounting function is optional, because we use `render` from `@testing-library/react` by default.
+
+If one or more of your components use a `react portal` in any way, you will need to specify the `id` of the node where
+it will be added.
+
+To configure wrapito we recommend adding a setupTests.tsx file and adding there all your custom configs and extensions.
 
 ```js
-import { render } from '@testing-library/react'
 import { configure } from 'wrapito'
 
 configure({
-  mount: render,
+  defaultHost: 'your-host-path',
+  portal: 'modal-root',
+  extend: {
+    /* Here you can group network calls to reuse them in your tests */
+  },
 })
 ```
 
-and add the previous file in `jest.config.json`
-
-```js
-  "setupFiles"
-:
-[
-  "<rootDir>/config/jest/setup.wrapito.js"
-],
-```
-
-If one or more of your components use a `react portal` in any way, you will need to specify the `id` of the node where
-it will be added:
+Add this line in your project setup (vite/cra):
 
 ```js
-import { render } from '@testing-library/react'
-import { configure } from 'wrapito'
-
-configure({
-  mount: render,
-  portal: 'modal-root',
-})
+setupFiles: ['./src/setupTests.tsx']
 ```
 
 ## 🏰 Builder API
@@ -92,8 +94,7 @@ given request, done by the production code, is not set up in the `responses obje
 #### withNetwork
 
 By using this feature you can configure the responses for your `http requests`. If your component is making a request
-that is not set up in the `responses object`, it will not be validated and it will return an empty response with code
-200.
+that is not set up in the `responses object`, it will not be validated and it will return an empty response with code 200.
 
 ```js
 import { wrap } from 'wrapito'
@@ -101,16 +102,14 @@ import { wrap } from 'wrapito'
 const responses = {
   host: 'my-host',
   method: 'get',
-  path: '/path/to/get/a/single/product/,
+  path: '/path/to/get/a/single/product/',
   responseBody: { id: 1, name: 'hummus' },
   status: 200,
   catchParams: true,
   delay: 500,
 }
 
-wrap(MyComponent)
-  .withNetwork(responses)
-  .mount()
+wrap(MyComponent).withNetwork(responses).mount()
 ```
 
 You can specify the default `host` via configuration:
@@ -146,21 +145,19 @@ import { wrap } from 'wrapito'
 
 const responses = [
   {
-    path: '/path/to/get/the/products/list/,
+    path: '/path/to/get/the/products/list/',
     responseBody: [
       { id: 1, name: 'hummus' },
       { id: 2, name: 'guacamole' },
-    ]
+    ],
   },
   {
-    path: '/path/to/get/a/single/product/,
+    path: '/path/to/get/a/single/product/',
     responseBody: { id: 1, name: 'hummus' },
   },
 ]
 
-wrap(MyComponent)
-  .withNetwork(responses)
-  .mount()
+wrap(MyComponent).withNetwork(responses).mount()
 ```
 
 There might be cases where one request is called several times and we want it to return different responses. An example
@@ -322,6 +319,10 @@ git push origin v1.0.5
 
 This will run a workflow in github that will publish this version for you.
 
+### Release beta versions
+
+WARNING: DO NOT MERGE YOUR PR IF YOU WANT TO DO A BETA RELEASE, SINCE THE CHANGES ARE NOT FULLY TRUSTED THEY SHOULD NOT GO TO MASTER
+
 If you need to release beta versions to test things, you may do so with the -beta tag. E.g:
 
 ```

package/dist/index.d.cts

@@ -54,7 +54,7 @@ type Extensions = {
     [key: string]: Extension;
 };
 type Component = React.ReactElement<any, any>;
-type RenderResult = RenderResult$1 | HTMLDivElement;
+type RenderResult = RenderResult$1;
 type Mount = (component: Component) => RenderResult;
 interface Config {
     defaultHost: string;
@@ -63,6 +63,7 @@ interface Config {
     changeRoute: (path: string) => void;
     history?: BrowserHistory;
     portal?: string;
+    portals?: string[];
     handleQueryParams?: boolean;
 }
 interface BrowserHistory extends History {

package/dist/index.d.ts

@@ -54,7 +54,7 @@ type Extensions = {
     [key: string]: Extension;
 };
 type Component = React.ReactElement<any, any>;
-type RenderResult = RenderResult$1 | HTMLDivElement;
+type RenderResult = RenderResult$1;
 type Mount = (component: Component) => RenderResult;
 interface Config {
     defaultHost: string;
@@ -63,6 +63,7 @@ interface Config {
     changeRoute: (path: string) => void;
     history?: BrowserHistory;
     portal?: string;
+    portals?: string[];
     handleQueryParams?: boolean;
 }
 interface BrowserHistory extends History {