diff --git a/packages/framework/framework/src/__snapshots__/compressible.test.tsx.snap b/packages/framework/framework/src/__snapshots__/compressible.test.tsx.snap index 3cc7b512b1..30114d68e5 100644 --- a/packages/framework/framework/src/__snapshots__/compressible.test.tsx.snap +++ b/packages/framework/framework/src/__snapshots__/compressible.test.tsx.snap @@ -3,192 +3,92 @@ exports[`compressible tests Two labels, one plugging in SuperHeader instead 1`] = ` - - - - - - Super Header - - - - - Normal caption - - - - - - + - - - - - Normal Header - - - - - Another normal caption - - - - - + Normal caption + + + + + Normal Header + + + Another normal caption + `; exports[`compressible tests Two labels, one with caption and one without 1`] = ` + + Header1 + - - + - - Header1 - - - - - - - - - Header2 - - - - - Caption2 - - - - - + Caption2 + `; diff --git a/packages/framework/framework/src/compressible.test.tsx b/packages/framework/framework/src/compressible.test.tsx index 7cbef934fd..f6a8cf9f91 100644 --- a/packages/framework/framework/src/compressible.test.tsx +++ b/packages/framework/framework/src/compressible.test.tsx @@ -8,8 +8,7 @@ import { mergeStyles } from '@fluentui-react-native/merge-props'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useSlot, withSlots } from '@fluentui-react-native/use-slot'; import { applyTokenLayers } from '@fluentui-react-native/use-tokens'; -import { mount } from 'enzyme'; -import toJson from 'enzyme-to-json'; +import * as renderer from 'react-test-renderer'; import { compressible } from './compressible'; import { buildUseTokens } from './useTokens'; @@ -103,32 +102,28 @@ const Label = compressible((props: LabelProps, useToken }; }, useLabelTokens); -/** - * this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript - */ -function snapshotTestTree(tree: any) { - (expect(toJson(tree)) as any).toMatchSnapshot(); -} - describe('compressible tests', () => { - /** first render the component with no updates */ it('Two labels, one with caption and one without', () => { - const tree = mount( - - , - ); - snapshotTestTree(tree); + const tree = renderer + .create( + + , + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); it('Two labels, one plugging in SuperHeader instead', () => { - const tree = mount( - - , - ); - snapshotTestTree(tree); + const tree = renderer + .create( + + , + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/framework/use-slot/src/__snapshots__/useSlot.test.tsx.snap b/packages/framework/use-slot/src/__snapshots__/useSlot.test.tsx.snap index 335ae027af..d5b401d6f9 100644 --- a/packages/framework/use-slot/src/__snapshots__/useSlot.test.tsx.snap +++ b/packages/framework/use-slot/src/__snapshots__/useSlot.test.tsx.snap @@ -2,140 +2,70 @@ exports[`useSlot tests Header and caption text render as expected 1`] = ` - - - - - Header text - - - - - - - Caption text - - - - - -`; - -exports[`useSlot tests Multi-level text elements are equivalent 1`] = ` - - - HeaderCaptionText - + Header text - -`; - -exports[`useSlot tests Multi-level text elements are equivalent 2`] = ` - - - HeaderCaptionText - + Caption text - + +`; + +exports[`useSlot tests Multi-level text elements are equivalent 1`] = ` + + HeaderCaptionText + +`; + +exports[`useSlot tests Multi-level text elements are equivalent 2`] = ` + + HeaderCaptionText + `; exports[`useSlot tests Two base text elements rendering, with and without styles 1`] = ` - - - - - No Style - - - - + No Style + + - - - With Style - - - - + } + > + With Style + `; diff --git a/packages/framework/use-slot/src/useSlot.test.tsx b/packages/framework/use-slot/src/useSlot.test.tsx index 6a4f914fa7..012d430bc2 100644 --- a/packages/framework/use-slot/src/useSlot.test.tsx +++ b/packages/framework/use-slot/src/useSlot.test.tsx @@ -5,8 +5,7 @@ import type { TextProps } from 'react-native'; import { Text, View } from 'react-native'; import { mergeStyles } from '@fluentui-react-native/merge-props'; -import { mount } from 'enzyme'; -import toJson from 'enzyme-to-json'; +import * as renderer from 'react-test-renderer'; import type { NativeReactType } from './renderSlot'; import { stagedComponent } from './stagedComponent'; @@ -77,43 +76,40 @@ const HeaderCaptionText1 = (props: React.PropsWithChildren) => { // Control authored by plugging the root const HeaderCaptionText2 = (props: React.PropsWithChildren) => HeaderText({ ...props, inner: CaptionText }); -/** - * this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript - */ -function snapshotTestTree(tree: any) { - (expect(toJson(tree)) as any).toMatchSnapshot(); -} - // some styles to use in tests const styleWithColor: TextProps['style'] = { color: 'blue' }; describe('useSlot tests', () => { /** first render the component with no updates */ it('Two base text elements rendering, with and without styles', () => { - const tree = mount( - - No Style - With Style - , - ); - snapshotTestTree(tree); + const tree = renderer + .create( + + No Style + With Style + , + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); it('Header and caption text render as expected', () => { - const tree = mount( - - Header text - Caption text - , - ); - snapshotTestTree(tree); + const tree = renderer + .create( + + Header text + Caption text + , + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); it('Multi-level text elements are equivalent', () => { - const tree1 = mount(HeaderCaptionText); - snapshotTestTree(tree1); - const tree2 = mount(HeaderCaptionText); - snapshotTestTree(tree2); - expect(toJson(tree1['HeaderCaptionText1'])).toEqual(toJson(tree2['HeaderCaptionText2'])); + const tree1 = renderer.create(HeaderCaptionText).toJSON(); + expect(tree1).toMatchSnapshot(); + const tree2 = renderer.create(HeaderCaptionText).toJSON(); + expect(tree2).toMatchSnapshot(); + expect(tree1['HeaderCaptionText1']).toEqual(tree2['HeaderCaptionText2']); }); }); diff --git a/packages/framework/use-slots/src/__snapshots__/useSlots.samples.test.tsx.snap b/packages/framework/use-slots/src/__snapshots__/useSlots.samples.test.tsx.snap index 1652a01725..19df4c49d9 100644 --- a/packages/framework/use-slots/src/__snapshots__/useSlots.samples.test.tsx.snap +++ b/packages/framework/use-slots/src/__snapshots__/useSlots.samples.test.tsx.snap @@ -2,94 +2,53 @@ exports[`useSlots sample code test suite renders sample 1 - the two types of basic bold text components 1`] = `
- - - Staged component at one level - - - + - - Standard component of a single level - - + Standard component of a single level +
`; exports[`useSlots sample code test suite renders sample 2 = the two types of two level header components 1`] = `
- - - Staged component with two levels - - - + - - - Standard component with two levels - - - + Standard component with two levels +
`; @@ -98,298 +57,183 @@ exports[`useSlots sample code test suite renders sample 3 - the two types of hig --- SIMPLE USAGE COMPARISON --- - -
- - - - Standard HOC - - - -
- - + +
-
- - Staged HOC - -
- + Staged HOC + +
--- COMPARISON WITH CAPTIONS --- - -
+ Standard HOC with Caption + + - - - - Standard HOC with Caption - - - - - - Caption text - - -
- - + +
-
- - Staged HOC with Caption - - + - Caption text - -
- + } + > + Caption text + +
--- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS --- - -
- - - - Standard HOC with caption and customizations - - - - + - - Caption text - - -
- - + Caption text + + +
-
- - Staged HOC with caption and customizations - - + - Caption text - -
- + } + > + Caption text + +
`; diff --git a/packages/framework/use-slots/src/useSlots.samples.test.tsx b/packages/framework/use-slots/src/useSlots.samples.test.tsx index 9f5f8f4f63..77434ade47 100644 --- a/packages/framework/use-slots/src/useSlots.samples.test.tsx +++ b/packages/framework/use-slots/src/useSlots.samples.test.tsx @@ -4,8 +4,7 @@ import type { CSSProperties } from 'react'; import { mergeProps } from '@fluentui-react-native/merge-props'; import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot'; -import { mount } from 'enzyme'; -import toJson from 'enzyme-to-json'; +import * as renderer from 'react-test-renderer'; import { buildUseSlots } from './buildUseSlots'; @@ -73,23 +72,21 @@ describe('useSlots sample code test suite', () => { }); BoldTextStaged.displayName = 'BoldTextStaged'; - /** - * The demos of the code use enzyme with JSDom to show the full tree. This has the side effect of doubling up primitive elements in the output - * JSON. This is an issue with rendering react-native with enzyme but in real usage the nodes only render once. - */ it('renders sample 1 - the two types of basic bold text components', () => { const styleToMerge: TextStyle = { color: 'black' }; /** * First render the staged component. This invokes the wrapper that was built by the stagedComponent function */ - const wrapper = mount( -
- Staged component at one level - Standard component of a single level -
, - ); - expect(toJson(wrapper)).toMatchSnapshot(); + const wrapper = renderer + .create( +
+ Staged component at one level + Standard component of a single level +
, + ) + .toJSON(); + expect(wrapper).toMatchSnapshot(); }); /** @@ -159,13 +156,15 @@ describe('useSlots sample code test suite', () => { /** * First render the staged component. This invokes the wrapper that was built by the stagedComponent function */ - const wrapper = mount( -
- Staged component with two levels - Standard component with two levels -
, - ); - expect(toJson(wrapper)).toMatchSnapshot(); + const wrapper = renderer + .create( +
+ Staged component with two levels + Standard component with two levels +
, + ) + .toJSON(); + expect(wrapper).toMatchSnapshot(); }); /** @@ -250,9 +249,6 @@ describe('useSlots sample code test suite', () => { }); CaptionedHeaderStaged.displayName = 'CaptionedHeaderStaged'; - /** - * Render to enzyme snapshots - */ it('renders sample 3 - the two types of higher order header components', () => { const styleToMerge: ViewStyle = { backgroundColor: 'gray', borderColor: 'purple', borderWidth: 1 }; @@ -260,27 +256,29 @@ describe('useSlots sample code test suite', () => { * Render the two sets of components. Note in the snapshots how the render tree layers for the standard approach are starting * to add up. */ - const wrapper = mount( -
- --- SIMPLE USAGE COMPARISON --- - Standard HOC - Staged HOC - --- COMPARISON WITH CAPTIONS --- - - Standard HOC with Caption - - - Staged HOC with Caption - - --- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS --- - - Standard HOC with caption and customizations - - - Staged HOC with caption and customizations - -
, - ); - expect(toJson(wrapper)).toMatchSnapshot(); + const wrapper = renderer + .create( +
+ --- SIMPLE USAGE COMPARISON --- + Standard HOC + Staged HOC + --- COMPARISON WITH CAPTIONS --- + + Standard HOC with Caption + + + Staged HOC with Caption + + --- COMPARISON WITH CAPTIONS AND CUSTOMIZATIONS --- + + Standard HOC with caption and customizations + + + Staged HOC with caption and customizations + +
, + ) + .toJSON(); + expect(wrapper).toMatchSnapshot(); }); }); diff --git a/packages/framework/use-styling/src/__snapshots__/useStyling.samples.test.tsx.snap b/packages/framework/use-styling/src/__snapshots__/useStyling.samples.test.tsx.snap index f71cd5970b..e672727631 100644 --- a/packages/framework/use-styling/src/__snapshots__/useStyling.samples.test.tsx.snap +++ b/packages/framework/use-styling/src/__snapshots__/useStyling.samples.test.tsx.snap @@ -1,7 +1,35 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`useStyling samples Sample1Text rendering with no overrides 1`] = ` - + + Sample1a + +`; + +exports[`useStyling samples Sample1Text rendering with some custom settings in the theme 1`] = ` + + Sample1b + +`; + +exports[`useStyling samples Sample2Text rendering with defaults and a color override 1`] = ` + - - Sample1a - + Sample2 with defaults - -`; - -exports[`useStyling samples Sample1Text rendering with some custom settings in the theme 1`] = ` - - - Sample1b - + Sample2 with color override via prop - -`; - -exports[`useStyling samples Sample2Text rendering with defaults and a color override 1`] = ` - - - - - - Sample2 with defaults - - - - - - - Sample2 with color override via prop - - - - `; exports[`useStyling samples Sample2Text rendering with some custom settings in the theme 1`] = ` - - - - - Sample2 with theme overrides set - - - - - - - Sample2 with theme and color prop override - - - - + + Sample2 with theme overrides set + + + Sample2 with theme and color prop override + `; diff --git a/packages/framework/use-styling/src/useStyling.samples.test.tsx b/packages/framework/use-styling/src/useStyling.samples.test.tsx index 1921a62a00..dca810c8f9 100644 --- a/packages/framework/use-styling/src/useStyling.samples.test.tsx +++ b/packages/framework/use-styling/src/useStyling.samples.test.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import type { TextProps, ColorValue } from 'react-native'; import { Text, View } from 'react-native'; -import { mount } from 'enzyme'; -import toJson from 'enzyme-to-json'; +// TODO: Without this import, we are somehow getting the global `expect` function from Jasmine instead of Jest. +import { expect } from '@jest/globals'; +import * as renderer from 'react-test-renderer'; import { buildProps } from './buildProps'; import type { ThemeHelper, UseStylingOptions } from './buildUseStyling'; @@ -46,13 +47,6 @@ const baseTheme: Theme = { const current = { theme: baseTheme }; -/** - * this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript - */ -function snapshotTestTree(tree: any) { - (expect(toJson(tree)) as any).toMatchSnapshot(); -} - /** * Because the buildUseStyling utility is not opinionated about theming, the theming is injected via * a theme helper implementation. This allows for a framework to build an opinionated version with @@ -137,8 +131,8 @@ describe('useStyling samples', () => { /** first render the component with no updates */ it('Sample1Text rendering with no overrides', () => { - const tree = mount(Sample1a); - snapshotTestTree(tree); + const tree = renderer.create(Sample1a).toJSON(); + expect(tree).toMatchSnapshot(); }); /** now re-theme the component via the components in the theme */ @@ -151,8 +145,8 @@ describe('useStyling samples', () => { }, }, }); - const tree = mount(Sample1b); - snapshotTestTree(tree); + const tree = renderer.create(Sample1b).toJSON(); + expect(tree).toMatchSnapshot(); }); /** @@ -218,13 +212,15 @@ describe('useStyling samples', () => { /** rendering the Sample2 component with the base theme */ it('Sample2Text rendering with defaults and a color override', () => { themeHelper.setActive(); - const tree = mount( - - Sample2 with defaults - Sample2 with color override via prop - , - ); - snapshotTestTree(tree); + const tree = renderer + .create( + + Sample2 with defaults + Sample2 with color override via prop + , + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); /** now re-theme the component via the components in the theme */ @@ -241,12 +237,14 @@ describe('useStyling samples', () => { }, }, }); - const tree = mount( - - Sample2 with theme overrides set - Sample2 with theme and color prop override - , - ); - snapshotTestTree(tree); + const tree = renderer + .create( + + Sample2 with theme overrides set + Sample2 with theme and color prop override + , + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/framework/use-tokens/src/__snapshots__/useTokens.samples.test.tsx.snap b/packages/framework/use-tokens/src/__snapshots__/useTokens.samples.test.tsx.snap index c0f0fa1712..64eb6e26e4 100644 --- a/packages/framework/use-tokens/src/__snapshots__/useTokens.samples.test.tsx.snap +++ b/packages/framework/use-tokens/src/__snapshots__/useTokens.samples.test.tsx.snap @@ -1,7 +1,35 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`useTokens samples Sample1Text rendering with no overrides 1`] = ` - + + Sample1a + +`; + +exports[`useTokens samples Sample1Text rendering with some custom settings in the theme 1`] = ` + + Sample1b + +`; + +exports[`useTokens samples Sample2Text rendering with defaults and a color override 1`] = ` + - - Sample1a - + Sample2 with defaults - -`; - -exports[`useTokens samples Sample1Text rendering with some custom settings in the theme 1`] = ` - - - Sample1b - + Sample2 with color override via prop - -`; - -exports[`useTokens samples Sample2Text rendering with defaults and a color override 1`] = ` - - - - - - Sample2 with defaults - - - - - - - Sample2 with color override via prop - - - - `; exports[`useTokens samples Sample2Text rendering with some custom settings in the theme 1`] = ` - - - - - Sample2 with theme overrides set - - - - - - - Sample2 with theme and color prop override - - - - + + Sample2 with theme overrides set + + + Sample2 with theme and color prop override + `; diff --git a/packages/framework/use-tokens/src/useTokens.samples.test.tsx b/packages/framework/use-tokens/src/useTokens.samples.test.tsx index db2b44e267..6df2527aeb 100644 --- a/packages/framework/use-tokens/src/useTokens.samples.test.tsx +++ b/packages/framework/use-tokens/src/useTokens.samples.test.tsx @@ -4,8 +4,9 @@ import { Text, View } from 'react-native'; import { immutableMerge } from '@fluentui-react-native/immutable-merge'; import { mergeStyles } from '@fluentui-react-native/merge-props'; -import { mount } from 'enzyme'; -import toJson from 'enzyme-to-json'; +// TODO: Without this import, we are somehow getting the global `expect` function from Jasmine instead of Jest. +import { expect } from '@jest/globals'; +import * as renderer from 'react-test-renderer'; import { buildUseTokens } from './buildUseTokens'; @@ -52,13 +53,6 @@ const setActiveTheme = (theme?: Partial) => { current.theme = (theme && immutableMerge(baseTheme, theme as Theme)) || baseTheme; }; -/** - * this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript - */ -function snapshotTestTree(tree: any) { - (expect(toJson(tree)) as any).toMatchSnapshot(); -} - /** * Helper function used to look up a component in the theme. Having this injected allows this module to not be dependent on the shape of * the theme used. @@ -139,8 +133,8 @@ describe('useTokens samples', () => { /** first render the component with no updates */ it('Sample1Text rendering with no overrides', () => { - const tree = mount(Sample1a); - snapshotTestTree(tree); + const tree = renderer.create(Sample1a).toJSON(); + expect(tree).toMatchSnapshot(); }); /** now re-theme the component via the components in the theme */ @@ -153,8 +147,8 @@ describe('useTokens samples', () => { }, }, }); - const tree = mount(Sample1b); - snapshotTestTree(tree); + const tree = renderer.create(Sample1b).toJSON(); + expect(tree).toMatchSnapshot(); }); /** @@ -192,13 +186,15 @@ describe('useTokens samples', () => { /** rendering the Sample2 component with the base theme */ it('Sample2Text rendering with defaults and a color override', () => { - const tree = mount( - - Sample2 with defaults - Sample2 with color override via prop - , - ); - snapshotTestTree(tree); + const tree = renderer + .create( + + Sample2 with defaults + Sample2 with color override via prop + , + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); /** now re-theme the component via the components in the theme */ @@ -211,12 +207,14 @@ describe('useTokens samples', () => { }, }, }); - const tree = mount( - - Sample2 with theme overrides set - Sample2 with theme and color prop override - , - ); - snapshotTestTree(tree); + const tree = renderer + .create( + + Sample2 with theme overrides set + Sample2 with theme and color prop override + , + ) + .toJSON(); + expect(tree).toMatchSnapshot(); }); }); diff --git a/packages/utils/interactive-hooks/src/__tests__/useConst.test.tsx b/packages/utils/interactive-hooks/src/__tests__/useConst.test.tsx index 410c632ada..c53e45937e 100644 --- a/packages/utils/interactive-hooks/src/__tests__/useConst.test.tsx +++ b/packages/utils/interactive-hooks/src/__tests__/useConst.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { validateHookValueNotChanged } from '@fluentui-react-native/test-tools'; -import { mount } from 'enzyme'; +import * as renderer from 'react-test-renderer'; import { useConst } from '../useConst'; @@ -18,12 +18,12 @@ describe('useConst', () => { return {value}; }; - const wrapper = mount(); - const firstValue = wrapper.text(); + const wrapper = renderer.create(); + const firstValue = wrapper.toJSON(); // Re-render the component - wrapper.update(); + wrapper.update(); // Text should be the same - expect(wrapper.text()).toBe(firstValue); + expect(wrapper.toJSON()).toBe(firstValue); // Function shouldn't have been called again expect(initializer).toHaveBeenCalledTimes(1); }); @@ -36,9 +36,9 @@ describe('useConst', () => { return {value}; }; - const wrapper = mount(); + const wrapper = renderer.create(); // Re-render the component - wrapper.update(); + wrapper.update(); // Function shouldn't have been called again expect(initializer).toHaveBeenCalledTimes(1); }); diff --git a/packages/utils/interactive-hooks/src/__tests__/useControllableValue.test.tsx b/packages/utils/interactive-hooks/src/__tests__/useControllableValue.test.tsx index 634041bfc6..987cd34f60 100644 --- a/packages/utils/interactive-hooks/src/__tests__/useControllableValue.test.tsx +++ b/packages/utils/interactive-hooks/src/__tests__/useControllableValue.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { validateHookValueNotChanged } from '@fluentui-react-native/test-tools'; -import { mount } from 'enzyme'; +import * as renderer from 'react-test-renderer'; import { useControllableValue } from '../useControllableValue'; @@ -13,16 +13,16 @@ describe('useControllableValue', () => { return ; }; - const wrapper1 = mount(); + const wrapper1 = renderer.create(); expect(resultValue!).toBe(true); - wrapper1.setProps({ value: false }); + wrapper1.update(); expect(resultValue!).toBe(false); - const wrapper2 = mount(); + const wrapper2 = renderer.create(); expect(resultValue!).toBe(false); - wrapper2.setProps({ value: true }); + wrapper2.update(); expect(resultValue!).toBe(true); }); @@ -33,7 +33,7 @@ describe('useControllableValue', () => { return ; }; - mount(); + renderer.create(); expect(resultValue!).toBe(true); }); @@ -44,10 +44,10 @@ describe('useControllableValue', () => { return ; }; - const wrapper = mount(); + const wrapper = renderer.create(); expect(resultValue!).toBe(true); - wrapper.setProps({ defaultValue: false }); + wrapper.update(); expect(resultValue!).toBe(true); });