diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b76bf59fda772..030c86d9f2b2a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2326,18 +2326,27 @@ importers:
'@babel/preset-env':
specifier: 7.24.7
version: 7.24.7(@babel/core@7.24.7)
+ '@jest/globals':
+ specifier: 29.7.0
+ version: 29.7.0
'@storybook/react':
specifier: 8.1.6
version: 8.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.0.4)
'@testing-library/dom':
specifier: 10.1.0
version: 10.1.0
+ '@testing-library/jest-dom':
+ specifier: 6.4.2
+ version: 6.4.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0)
'@testing-library/react':
specifier: 15.0.7
version: 15.0.7(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@testing-library/user-event':
specifier: 14.5.2
version: 14.5.2(@testing-library/dom@10.1.0)
+ '@types/jest':
+ specifier: 29.5.12
+ version: 29.5.12
'@types/react':
specifier: 18.3.1
version: 18.3.1
@@ -17985,6 +17994,21 @@ snapshots:
lz-string: 1.5.0
pretty-format: 27.5.1
+ '@testing-library/jest-dom@6.4.2(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0)':
+ dependencies:
+ '@adobe/css-tools': 4.4.0
+ '@babel/runtime': 7.24.7
+ aria-query: 5.3.0
+ chalk: 3.0.0
+ css.escape: 1.5.1
+ dom-accessibility-api: 0.6.3
+ lodash: 4.17.21
+ redent: 3.0.0
+ optionalDependencies:
+ '@jest/globals': 29.7.0
+ '@types/jest': 29.5.12
+ jest: 29.7.0
+
'@testing-library/jest-dom@6.4.2(jest@29.7.0)':
dependencies:
'@adobe/css-tools': 4.4.0
diff --git a/projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.jsx b/projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.tsx
similarity index 82%
rename from projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.jsx
rename to projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.tsx
index af823a2e7081b..3b5f08f7e3dab 100644
--- a/projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.jsx
+++ b/projects/packages/my-jetpack/_inc/components/connection-status-card/test/component.tsx
@@ -1,11 +1,27 @@
+import '@testing-library/jest-dom';
import { CONNECTION_STORE_ID } from '@automattic/jetpack-connection';
-import { jest } from '@jest/globals';
import { render, renderHook, screen } from '@testing-library/react';
import { useSelect } from '@wordpress/data';
import ConnectionStatusCard from '../index';
+import type { StateProducts, MyJetpackInitialState } from '../../../data/types';
+
+interface TestMyJetpackInitialState {
+ lifecycleStats: Pick<
+ MyJetpackInitialState[ 'lifecycleStats' ],
+ 'historicallyActiveModules' | 'brokenModules'
+ >;
+ products: {
+ items: {
+ 'anti-spam': Pick<
+ StateProducts[ 'anti-spam' ],
+ 'requires_user_connection' | 'status' | 'pricing_for_ui'
+ >;
+ };
+ };
+}
const resetInitialState = () => {
- global.window.myJetpackInitialState = {
+ ( window.myJetpackInitialState as unknown as TestMyJetpackInitialState ) = {
lifecycleStats: {
historicallyActiveModules: [],
brokenModules: {
@@ -18,8 +34,17 @@ const resetInitialState = () => {
'anti-spam': {
requires_user_connection: false,
status: 'inactive',
- pricingForUi: {
- productTerm: 'year',
+ // This property is needed as it is used when the `useAllProducts` hook is called
+ // in the connection status card component
+ pricing_for_ui: {
+ product_term: 'year',
+ available: false,
+ wpcom_product_slug: '',
+ currency_code: '',
+ full_price: 0,
+ discount_price: 0,
+ coupon_discount: 0,
+ is_introductory_offer: false,
},
},
},
@@ -33,7 +58,7 @@ const setConnectionStore = ( {
hasConnectedOwner = false,
} = {} ) => {
let storeSelect;
- renderHook( () => useSelect( select => ( storeSelect = select( CONNECTION_STORE_ID ) ) ) );
+ renderHook( () => useSelect( select => ( storeSelect = select( CONNECTION_STORE_ID ) ), [] ) );
jest
.spyOn( storeSelect, 'getConnectionStatus' )
.mockReset()
@@ -75,8 +100,8 @@ describe( 'ConnectionStatusCard', () => {
describe( 'When the site is not registered and has broken modules', () => {
const setup = () => {
- global.window.myJetpackInitialState.lifecycleStats.brokenModules.needs_site_connection = [
- 'module1',
+ window.myJetpackInitialState.lifecycleStats.brokenModules.needs_site_connection = [
+ 'anti-spam',
];
return render( );
};
@@ -119,9 +144,7 @@ describe( 'ConnectionStatusCard', () => {
describe( 'There are products that require user connection', () => {
const setup = () => {
setConnectionStore( { isRegistered: true } );
- global.window.myJetpackInitialState.products.items[
- 'anti-spam'
- ].requires_user_connection = true;
+ window.myJetpackInitialState.products.items[ 'anti-spam' ].requires_user_connection = true;
return render( );
};
@@ -142,8 +165,8 @@ describe( 'ConnectionStatusCard', () => {
describe( 'When the user has not connected their WordPress.com account and there are broken modules', () => {
const setup = () => {
setConnectionStore( { isRegistered: true } );
- global.window.myJetpackInitialState.lifecycleStats.brokenModules.needs_user_connection = [
- 'module1',
+ window.myJetpackInitialState.lifecycleStats.brokenModules.needs_user_connection = [
+ 'anti-spam',
];
return render( );
};
diff --git a/projects/packages/my-jetpack/_inc/data/types.ts b/projects/packages/my-jetpack/_inc/data/types.ts
index 9623f8c64bd43..cdd8ccc0f80bc 100644
--- a/projects/packages/my-jetpack/_inc/data/types.ts
+++ b/projects/packages/my-jetpack/_inc/data/types.ts
@@ -19,7 +19,8 @@ export type BackupCountStats = {
total_audio_count: number;
};
-type StateProducts = Window[ 'myJetpackInitialState' ][ 'products' ][ 'items' ];
+export type MyJetpackInitialState = Window[ 'myJetpackInitialState' ];
+export type StateProducts = Window[ 'myJetpackInitialState' ][ 'products' ][ 'items' ];
export type ProductSnakeCase = StateProducts[ string ];
export type ProductCamelCase = ToCamelCase< ProductSnakeCase > & {
diff --git a/projects/packages/my-jetpack/changelog/update-connection-status-tests-to-typescript b/projects/packages/my-jetpack/changelog/update-connection-status-tests-to-typescript
new file mode 100644
index 0000000000000..a38b709b1b57f
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/update-connection-status-tests-to-typescript
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update connection status card tests to TS
diff --git a/projects/packages/my-jetpack/global.d.ts b/projects/packages/my-jetpack/global.d.ts
index 74441c6df499c..412903cc0a2a2 100644
--- a/projects/packages/my-jetpack/global.d.ts
+++ b/projects/packages/my-jetpack/global.d.ts
@@ -9,6 +9,7 @@ declare module '@wordpress/components';
declare module '@wordpress/compose';
declare module '@wordpress/i18n';
declare module '@wordpress/icons';
+declare module '@automattic/jetpack-connection';
type JetpackModule =
| 'anti-spam'
diff --git a/projects/packages/my-jetpack/package.json b/projects/packages/my-jetpack/package.json
index a67334e58e3c9..60ca0ae95510a 100644
--- a/projects/packages/my-jetpack/package.json
+++ b/projects/packages/my-jetpack/package.json
@@ -56,10 +56,13 @@
"@automattic/jetpack-webpack-config": "workspace:*",
"@babel/core": "7.24.7",
"@babel/preset-env": "7.24.7",
+ "@jest/globals": "29.7.0",
"@storybook/react": "8.1.6",
"@testing-library/dom": "10.1.0",
+ "@testing-library/jest-dom": "6.4.2",
"@testing-library/react": "15.0.7",
"@testing-library/user-event": "14.5.2",
+ "@types/jest": "29.5.12",
"@types/react": "18.3.1",
"jest": "29.7.0",
"jest-environment-jsdom": "29.7.0",