@quilted/preact-testing
Advanced tools
@quilted/preact-testing - npm Package Compare versions
Comparing version 0.0.0-preview-20240506234819 to 0.0.0-preview-20240508130046
| # @quilted/react-testing | ||
| ## 0.0.0-preview-20240506234819 | ||
| ## 0.0.0-preview-20240508130046 | ||
| ### Patch Changes | ||
| - Upgrade Preact | ||
| - Fix templates | ||
| ## 0.1.6 | ||
| ### Patch Changes | ||
| - [`285b2f0`](https://github.com/lemonmade/quilt/commit/285b2f083bfc6fe81db35e2950c8b3ae846486d3) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix templates | ||
| ## 0.1.5 | ||
@@ -10,0 +16,0 @@ |
| { | ||
| "name": "@quilted/preact-testing", | ||
| "type": "module", | ||
| "version": "0.0.0-preview-20240506234819", | ||
| "version": "0.0.0-preview-20240508130046", | ||
| "repository": { | ||
@@ -42,3 +42,2 @@ "type": "git", | ||
| "devDependencies": { | ||
| "@types/react-test-renderer": "^18.0.0", | ||
| "expect": "^29.0.0", | ||
@@ -45,0 +44,0 @@ "preact": "^10.21.0" |
@@ -23,9 +23,9 @@ # `@quilted/preact-testing` | ||
| - [`debug()`](#debug) | ||
| - ['toHaveReactProps()'](#toHaveReactProps) | ||
| - ['toHaveReactDataProps()'](#toHaveReactDataProps) | ||
| - ['toContainReactComponent()'](#toContainReactComponent) | ||
| - ['toContainReactComponentTimes()'](#toContainReactComponentTimes) | ||
| - ['toProvideReactContext()'](#toProvideReactContext) | ||
| - ['toContainReactText()'](#toContainReactText) | ||
| - ['toContainReactHTML()'](#toContainReactHTML) | ||
| - ['toHavePreactProps()'](#toHavePreactProps) | ||
| - ['toHavePreactDataProps()'](#toHavePreactDataProps) | ||
| - ['toContainPreactComponent()'](#toContainPreactComponent) | ||
| - ['toContainPreactComponentTimes()'](#toContainPreactComponentTimes) | ||
| - ['toProvidePreactContext()'](#toProvidePreactContext) | ||
| - ['toContainPreactText()'](#toContainPreactText) | ||
| - ['toContainPreactHTML()'](#toContainPreactHTML) | ||
| - [FAQ](#faq) | ||
@@ -96,3 +96,3 @@ | ||
| This will allow you to use matchers such as [`toContainReactText`](#toContainReactText) or [`toContainReactComponent`](#toContainReactComponent) on your tree. | ||
| This will allow you to use matchers such as [`toContainPreactText`](#toContainPreactText) or [`toContainPreactComponent`](#toContainPreactComponent) on your tree. | ||
@@ -107,3 +107,3 @@ ```tsx | ||
| const clickCounter = render(<ClickCounter defaultCount={0} />); | ||
| expect(wrapper).toContainReactComponent(LinkComponent, { | ||
| expect(wrapper).toContainPreactComponent(LinkComponent, { | ||
| to: 'https://www.cool-website.com', | ||
@@ -117,3 +117,3 @@ }); | ||
| clickCounter.find('button').trigger('onClick'); | ||
| expect(clickCounter).toContainReactText('count: 2'); | ||
| expect(clickCounter).toContainPreactText('count: 2'); | ||
| }); | ||
@@ -123,3 +123,3 @@ }); | ||
| Additionally, this library provides DOM-specific matchers, like [`toContainReactHTML`](#toContainReactHTML), from the `@quilted/preact-testing/dom-matchers` entrypoint. | ||
| Additionally, this library provides DOM-specific matchers, like [`toContainPreactHTML`](#toContainPreactHTML), from the `@quilted/preact-testing/dom-matchers` entrypoint. | ||
@@ -133,3 +133,3 @@ ```tsx | ||
| const button = render(<Button>Hello!</Button>); | ||
| expect(button).toContainReactHTML('<button>Hello!</button>'); | ||
| expect(button).toContainPreactHTML('<button>Hello!</button>'); | ||
| ``` | ||
@@ -232,3 +232,3 @@ | ||
| ```ts | ||
| import {useState} from 'react'; | ||
| import {useState} from 'preact/hooks'; | ||
| import {render} from '@quilted/preact-testing'; | ||
@@ -492,3 +492,3 @@ | ||
| Most tests looking for context are probably better served by using the [`.toProvideReactContext`](#toProvideReactContext) matcher. However, it is sometimes useful to grab the context value directly. In particular, if your context object is "smart" — that is, it has methods, and is not just data — you may want to grab the context object to call its functions. | ||
| Most tests looking for context are probably better served by using the [`.toProvidePreactContext`](#toProvidePreactContext) matcher. However, it is sometimes useful to grab the context value directly. In particular, if your context object is "smart" — that is, it has methods, and is not just data — you may want to grab the context object to call its functions. | ||
@@ -523,3 +523,3 @@ ```tsx | ||
| ```tsx | ||
| import {useState} from 'react'; | ||
| import {useState} from 'preact/hooks'; | ||
@@ -613,3 +613,3 @@ function MyComponent({onClick}: {onClick(id: string): void}) { | ||
| #### <a name="toHaveReactProps"></a> `.toHaveReactProps(props: object)` | ||
| #### <a name="toHavePreactProps"></a> `.toHavePreactProps(props: object)` | ||
@@ -621,4 +621,6 @@ Checks whether a `Root` or `Node` object has specified props (asymmetric matchers like `expect.objectContaining` are fully supported). Strict type checking is enforced, so the `props` you pass must be a valid subset of the actual props for the component. | ||
| expect(myComponent.find('div')).toHaveReactProps({'aria-label': 'Hello world'}); | ||
| expect(myComponent.find('div')).toHaveReactProps({ | ||
| expect(myComponent.find('div')).toHavePreactProps({ | ||
| 'aria-label': 'Hello world', | ||
| }); | ||
| expect(myComponent.find('div')).toHavePreactProps({ | ||
| onClick: expect.any(Function), | ||
@@ -628,7 +630,7 @@ }); | ||
| #### <a name="toHaveReactDataProps"></a> `.toHaveReactDataProps(data: object)` | ||
| #### <a name="toHavePreactDataProps"></a> `.toHavePreactDataProps(data: object)` | ||
| > Only available from `@quilted/preact-testing/dom-matchers` | ||
| Like `.toHaveReactProps()`, but is not strictly typed. This makes it more suitable for asserting on `data-` attributes, which can’t be strongly typed. | ||
| Like `.toHavePreactProps()`, but is not strictly typed. This makes it more suitable for asserting on `data-` attributes, which can’t be strongly typed. | ||
@@ -638,3 +640,3 @@ ```tsx | ||
| expect(myComponent.find('div')).toHaveReactDataProps({ | ||
| expect(myComponent.find('div')).toHavePreactDataProps({ | ||
| 'data-message': 'Hello world', | ||
@@ -644,3 +646,3 @@ }); | ||
| #### <a name="toContainReactComponent"></a> `.toContainReactComponent(type: string | ComponentType, props?: object)` | ||
| #### <a name="toContainPreactComponent"></a> `.toContainPreactComponent(type: string | ComponentType, props?: object)` | ||
@@ -652,3 +654,3 @@ Asserts that at least one component matching `type` is in the descendants of the passed node. If the second argument is passed, this expectation will further filter the matches by components whose props are equal to the passed object (again, asymmetric matchers are fully supported). | ||
| expect(myComponent).toContainReactComponent('div', { | ||
| expect(myComponent).toContainPreactComponent('div', { | ||
| 'aria-label': 'Hello world', | ||
@@ -659,5 +661,5 @@ onClick: expect.any(Function), | ||
| #### <a name="toContainReactComponentTimes"></a> `.toContainReactComponentTimes(type: string | ComponentType, times: number, props?: object)` | ||
| #### <a name="toContainPreactComponentTimes"></a> `.toContainPreactComponentTimes(type: string | ComponentType, times: number, props?: object)` | ||
| Asserts that a component matching `type` is in the descendants of the passed node a number of times. If the third argument is passed, this expectation will further filter the matches by components whose props are equal to the passed object (again, asymmetric matchers are fully supported). To assert that one component is or is not the descendant of the passed node use `.toContainReactComponent` or `.not.toContainReactComponent`. | ||
| Asserts that a component matching `type` is in the descendants of the passed node a number of times. If the third argument is passed, this expectation will further filter the matches by components whose props are equal to the passed object (again, asymmetric matchers are fully supported). To assert that one component is or is not the descendant of the passed node use `.toContainPreactComponent` or `.not.toContainPreactComponent`. | ||
@@ -667,3 +669,3 @@ ```tsx | ||
| expect(myComponent).toContainReactComponentTimes('div', 5, { | ||
| expect(myComponent).toContainPreactComponentTimes('div', 5, { | ||
| 'aria-label': 'Hello world', | ||
@@ -673,3 +675,3 @@ }); | ||
| #### <a name="toProvideReactContext"></a> `.toProvideReactContext<T>(context: Context<T>, value?: T)` | ||
| #### <a name="toProvidePreactContext"></a> `.toProvidePreactContext<T>(context: Context<T>, value?: T)` | ||
@@ -679,3 +681,3 @@ Asserts that at least one `context.Provider` is in the descendants of the passed node. If the second argument is passed, this expectation will further filter the matches by providers whose value is equal to the passed object (again, asymmetric matchers are fully supported). | ||
| ```tsx | ||
| import {createContext} from 'react'; | ||
| import {createContext} from 'preact'; | ||
@@ -694,3 +696,3 @@ const MyContext = createContext({hello: 'world'}); | ||
| expect(myComponent).toProvideReactContext(MyContext, { | ||
| expect(myComponent).toProvidePreactContext(MyContext, { | ||
| hello: expect.any(String), | ||
@@ -700,3 +702,3 @@ }); | ||
| #### <a name="toContainReactText"></a> `.toContainReactText(text: string)` | ||
| #### <a name="toContainPreactText"></a> `.toContainPreactText(text: string)` | ||
@@ -707,6 +709,6 @@ Asserts that the rendered output of the component contains the passed string as text content (that is, the text is included in what you would get by calling `textContent` on all root DOM nodes rendered by the component). | ||
| const myComponent = render(<MyComponent />); | ||
| expect(myComponent).toContainReactText('Hello world!'); | ||
| expect(myComponent).toContainPreactText('Hello world!'); | ||
| ``` | ||
| #### <a name="toContainReactHTML"></a> `.toContainReactHTML(text: string)` | ||
| #### <a name="toContainPreactHTML"></a> `.toContainPreactHTML(text: string)` | ||
@@ -719,3 +721,3 @@ > Only available from `@quilted/preact-testing/dom-matchers` | ||
| const myComponent = render(<MyComponent />); | ||
| expect(myComponent).toContainReactHTML('<span>Hello world!</span>'); | ||
| expect(myComponent).toContainPreactHTML('<span>Hello world!</span>'); | ||
| ``` | ||
@@ -722,0 +724,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.01%
254361
- Dev dependency count
- decreased by-33.33%
2
- Number of lines in readme file
- increased by0.28%
719