Skip to content

Commit e04ad86

Browse files
jsamrjsamr
committed
refactor(tests): use react native jest matchers
1 parent 141baae commit e04ad86

17 files changed

+160
-84
lines changed

‎packages/render-html/jest.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = {
22
...require('../../jest-config-base'),
3-
setupFiles: ['<rootDir>/jest/setup.js']
3+
setupFiles: ['<rootDir>/jest/setup.ts'],
4+
setupFilesAfterEnv: ['<rootDir>/jest/setupAfterEnv.ts']
45
};

packages/render-html/jest/setup.js renamed to packages/render-html/jest/setup.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
//@ts-expect-error __DEV__ does not exists at top-level
12
global.__DEV__ = true;
23

4+
//@ts-expect-error performance does not exists at top-level
35
global.performance = {
46
now() {
57
const [seconds, nano] = process.hrtime();

‎packages/render-html/jest/setupAfterEnv.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '@testing-library/jest-native';
2+
import '@testing-library/jest-native/extend-expect';

‎packages/render-html/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"@babel/runtime": "^7.13.17",
4848
"@microsoft/api-extractor": "^7.14.0",
4949
"@release-it/conventional-changelog": "^2.0.1",
50+
"@testing-library/jest-native": "^4.0.2",
5051
"@testing-library/react-hooks": "^7.0.0",
5152
"@testing-library/react-native": "^7.2.0",
5253
"@types/jest": "^26.0.23",

‎packages/render-html/src/__tests__/component.render-html-a11y.test.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ describe('RenderHTML a11y', () => {
3030
/>
3131
);
3232
const { getByTestId } = render(element);
33-
expect(getByTestId('a').props.accessibilityRole).toBe('link');
34-
expect(getByTestId('a').props.accessible).toBe(true);
33+
const anchor = getByTestId('a');
34+
expect(anchor).toHaveProp('accessibilityRole', 'link');
35+
expect(anchor).toHaveProp('accessible', true);
3536
expect(() => AccessibilityEngine.check(element)).not.toThrow();
3637
});
3738
}
@@ -47,8 +48,9 @@ describe('RenderHTML a11y', () => {
4748
/>
4849
);
4950
const { getByTestId } = render(element);
50-
expect(getByTestId('a').props.accessibilityRole).not.toBeDefined();
51-
expect(getByTestId('a').props.accessible).not.toBeDefined();
51+
const anchor = getByTestId('a');
52+
expect(anchor).not.toHaveProp('accessibilityRole');
53+
expect(anchor).not.toHaveProp('accessible');
5254
expect(() => AccessibilityEngine.check(element)).not.toThrow();
5355
});
5456
});
@@ -65,7 +67,7 @@ describe('RenderHTML a11y', () => {
6567
/>
6668
);
6769
const { getByTestId } = render(element);
68-
expect(getByTestId(header).props.accessibilityRole).toBe('header');
70+
expect(getByTestId(header)).toHaveProp('accessibilityRole', 'header');
6971
expect(() => AccessibilityEngine.check(element)).not.toThrow();
7072
}
7173
});
@@ -83,9 +85,9 @@ describe('RenderHTML a11y', () => {
8385
);
8486
const { getByA11yRole, findByTestId } = render(element);
8587
await findByTestId('image-success');
86-
const imgProps = getByA11yRole('image').props;
87-
expect(imgProps.accessibilityRole).toBe('image');
88-
expect(imgProps.accessibilityLabel).toBe('An image');
88+
const image = getByA11yRole('image');
89+
expect(image).toHaveProp('accessibilityRole', 'image');
90+
expect(image).toHaveProp('accessibilityLabel', 'An image');
8991
// Waiting for AccessibilityEngine to support async udpates
9092
// see https://github.com/aryella-lacerda/react-native-accessibility-engine/issues/97
9193
// await waitFor(() =>
@@ -119,8 +121,8 @@ describe('RenderHTML a11y', () => {
119121
/>
120122
);
121123
const { getByA11yRole } = render(element);
122-
const buttonProps = getByA11yRole('button').props;
123-
expect(buttonProps.accessibilityRole).toBe('button');
124+
const button = getByA11yRole('button');
125+
expect(button).toHaveProp('accessibilityRole', 'button');
124126
expect(() => AccessibilityEngine.check(element)).not.toThrow();
125127
});
126128
it('should add a button role if onPress is defined for custom renderers with a textual content model', () => {
@@ -146,8 +148,8 @@ describe('RenderHTML a11y', () => {
146148
/>
147149
);
148150
const { getByA11yRole } = render(element);
149-
const buttonProps = getByA11yRole('link').props;
150-
expect(buttonProps.accessibilityRole).toBe('link');
151+
const button = getByA11yRole('link');
152+
expect(button).toHaveProp('accessibilityRole', 'link');
151153
expect(() => AccessibilityEngine.check(element)).not.toThrow();
152154
});
153155
});

‎packages/render-html/src/__tests__/component.render-html.test.tsx‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
defaultHTMLElementModels,
1212
HTMLContentModel
1313
} from '@native-html/transient-render-engine';
14-
import { Image, StyleSheet, Text } from 'react-native';
14+
import { Image, Text } from 'react-native';
1515
import { useRendererProps } from '../context/RenderersPropsProvider';
1616
import TNodeChildrenRenderer from '../TNodeChildrenRenderer';
1717
import OLElement from '../elements/OLElement';
@@ -73,15 +73,16 @@ describe('RenderHTML', () => {
7373
contentWidth={contentWidth}
7474
/>
7575
);
76-
expect(UNSAFE_getByType(ImgTag).props.contentWidth).toBe(contentWidth);
76+
expect(UNSAFE_getByType(ImgTag)).toHaveProp('contentWidth', contentWidth);
7777
update(
7878
<RenderHTML
7979
source={{ html: '<img src="https://img.com/1" />' }}
8080
debug={false}
8181
contentWidth={nextContentWidth}
8282
/>
8383
);
84-
expect(UNSAFE_getByType(ImgTag).props.contentWidth).toBe(
84+
expect(UNSAFE_getByType(ImgTag)).toHaveProp(
85+
'contentWidth',
8586
nextContentWidth
8687
);
8788
});
@@ -101,8 +102,7 @@ describe('RenderHTML', () => {
101102
contentWidth={200}
102103
/>
103104
);
104-
const imgProps = getByA11yRole('image').props;
105-
expect(StyleSheet.flatten(imgProps.style)).toMatchObject({
105+
expect(getByA11yRole('image')).toHaveStyle({
106106
backgroundColor: 'red'
107107
});
108108
});
@@ -201,7 +201,7 @@ describe('RenderHTML', () => {
201201
/>
202202
);
203203
const span = getByTestId('span');
204-
expect(StyleSheet.flatten(span.props.style)).toMatchObject(tagsStyles.span);
204+
expect(span).toHaveStyle(tagsStyles.span);
205205
});
206206
describe('regarding onTTreeChange prop', () => {
207207
const onTTreeChange = jest.fn();
@@ -398,7 +398,7 @@ describe('RenderHTML', () => {
398398
/>
399399
);
400400
const div = getByTestId('div');
401-
expect(div.props.collapsable).toBe(false);
401+
expect(div).toHaveProp('collapsable', false);
402402
});
403403
it('should apply `textProps` to TPhrasing renderers', () => {
404404
const SpanRenderer: CustomTextualRenderer = ({
@@ -421,7 +421,7 @@ describe('RenderHTML', () => {
421421
/>
422422
);
423423
const span = getByTestId('span');
424-
expect(span.props.adjustsFontSizeToFit).toBe(true);
424+
expect(span).toHaveProp('adjustsFontSizeToFit', true);
425425
});
426426
it('should apply `textProps` to TText renderers', () => {
427427
const SpanRenderer: CustomTextualRenderer = ({
@@ -444,7 +444,7 @@ describe('RenderHTML', () => {
444444
/>
445445
);
446446
const span = getByTestId('span');
447-
expect(span.props.adjustsFontSizeToFit).toBe(true);
447+
expect(span).toHaveProp('adjustsFontSizeToFit', true);
448448
});
449449
it('should apply `props`', () => {
450450
const SpanRenderer: CustomTextualRenderer = ({
@@ -467,7 +467,7 @@ describe('RenderHTML', () => {
467467
/>
468468
);
469469
const span = getByTestId('span');
470-
expect(span.props.accessibilityRole).toBe('adjustable');
470+
expect(span).toHaveProp('accessibilityRole', 'adjustable');
471471
});
472472
it('should apply `tnode.getReactNativeProps()` to TPhrasing renderers', () => {
473473
const customHTMLElementModels: HTMLElementModelRecord = {
@@ -490,7 +490,7 @@ describe('RenderHTML', () => {
490490
/>
491491
);
492492
const span = getByTestId('span');
493-
expect(span.props.accessibilityRole).toBe('adjustable');
493+
expect(span).toHaveProp('accessibilityRole', 'adjustable');
494494
});
495495
it('should apply `tnode.getReactNativeProps()` to TText renderers', () => {
496496
const customHTMLElementModels: HTMLElementModelRecord = {
@@ -513,7 +513,7 @@ describe('RenderHTML', () => {
513513
/>
514514
);
515515
const span = getByTestId('span');
516-
expect(span.props.accessibilityRole).toBe('adjustable');
516+
expect(span).toHaveProp('accessibilityRole', 'adjustable');
517517
});
518518
it('should apply `tnode.getReactNativeProps()` to TBlock renderers', () => {
519519
const customHTMLElementModels: HTMLElementModelRecord = {
@@ -536,7 +536,7 @@ describe('RenderHTML', () => {
536536
/>
537537
);
538538
const div = getByTestId('div');
539-
expect(div.props.accessibilityRole).toBe('adjustable');
539+
expect(div).toHaveProp('accessibilityRole', 'adjustable');
540540
});
541541
});
542542
describe('regarding TNodeRenderer', () => {
@@ -580,7 +580,7 @@ describe('RenderHTML', () => {
580580
/>
581581
);
582582
const div = await findByTestId('div');
583-
expect(StyleSheet.flatten(div.props.style)).toEqual({
583+
expect(div).toHaveStyle({
584584
marginBottom: 10,
585585
paddingBottom: 10
586586
});
@@ -606,7 +606,7 @@ describe('RenderHTML', () => {
606606
/>
607607
);
608608
const div = await findByTestId('div');
609-
expect(StyleSheet.flatten(div.props.style)).toEqual({
609+
expect(div).toHaveStyle({
610610
marginBottom: 10
611611
});
612612
});
@@ -632,7 +632,7 @@ describe('RenderHTML', () => {
632632
/>
633633
);
634634
const div = await findByTestId('span');
635-
expect(StyleSheet.flatten(div.props.style)).toMatchObject({
635+
expect(div).toHaveStyle({
636636
marginBottom: 10
637637
});
638638
});
@@ -651,10 +651,10 @@ describe('RenderHTML', () => {
651651
enableExperimentalMarginCollapsing
652652
/>
653653
);
654-
const div = getByTestId('div');
655-
const p = getByTestId('p');
656-
expect(StyleSheet.flatten(div.props.style).marginBottom).toBe(10);
657-
expect(StyleSheet.flatten(p.props.style).marginTop).toBe(0);
654+
expect(getByTestId('div')).toHaveStyle({
655+
marginBottom: 10
656+
});
657+
expect(getByTestId('p')).toHaveStyle({ marginTop: 0 });
658658
});
659659
it('should not collapse margins of sibling phrasing children when enabled', () => {
660660
const { getByTestId } = render(
@@ -667,10 +667,8 @@ describe('RenderHTML', () => {
667667
enableExperimentalMarginCollapsing
668668
/>
669669
);
670-
const div = getByTestId('div');
671-
const span = getByTestId('span');
672-
expect(StyleSheet.flatten(div.props.style).marginBottom).toBe(10);
673-
expect(StyleSheet.flatten(span.props.style).marginTop).toBe(10);
670+
expect(getByTestId('div')).toHaveStyle({ marginBottom: 10 });
671+
expect(getByTestId('span')).toHaveStyle({ marginTop: 10 });
674672
});
675673

676674
it('should not collapse margins of sibling children when disabled', () => {
@@ -684,10 +682,8 @@ describe('RenderHTML', () => {
684682
enableExperimentalMarginCollapsing={false}
685683
/>
686684
);
687-
const div = getByTestId('div');
688-
const p = getByTestId('p');
689-
expect(StyleSheet.flatten(div.props.style).marginBottom).toBe(10);
690-
expect(StyleSheet.flatten(p.props.style).marginTop).toBe(10);
685+
expect(getByTestId('div')).toHaveStyle({ marginBottom: 10 });
686+
expect(getByTestId('p')).toHaveStyle({ marginTop: 10 });
691687
});
692688
});
693689
describe('regarding renderersProps prop', () => {
@@ -831,7 +827,7 @@ describe('RenderHTML', () => {
831827
/>
832828
);
833829
const img = await findByTestId('img');
834-
expect(StyleSheet.flatten(img.props.style)).toMatchObject({
830+
expect(img).toHaveStyle({
835831
borderBottomWidth: 4
836832
});
837833
});

‎packages/render-html/src/__tests__/regression.172.custom-image-resize-mode.test.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import { render } from '@testing-library/react-native';
3-
import { StyleSheet } from 'react-native';
43
import RenderHTML from '../RenderHTML';
54

65
/**
@@ -24,9 +23,7 @@ describe('HTMLImageElement component should pass regression test #172', () => {
2423
tagsStyles={tagsStyles as any}
2524
/>
2625
);
27-
const imageLayout = getByTestId('image-success');
28-
expect(StyleSheet.flatten(imageLayout.props.style)).toMatchObject(
29-
tagsStyles.img
30-
);
26+
const image = getByTestId('image-success');
27+
expect(image).toHaveStyle(tagsStyles.img);
3128
});
3229
});

‎packages/render-html/src/__tests__/regression.193.text-selectable-prop.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function expectFirstTextToHaveSelectable(html: string, matchingString: string) {
1414
const text = getByText(matchingString);
1515
const ancestorText = getLastAncestorOfType(text);
1616
expect(ancestorText).toBe(null);
17-
expect(text.props.selectable).toBe(true);
17+
expect(text).toHaveProp('selectable', true);
1818
}
1919

2020
/**

‎packages/render-html/src/__tests__/regression.343.tags-styles-re-render.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,6 @@ describe('RenderHTML component', () => {
3535
/>
3636
);
3737
const text = getByText('hello world');
38-
expect(StyleSheet.flatten(text.props.style)).toMatchObject(letterSpacing3);
38+
expect(StyleSheet.flatten(text)).toHaveStyle(letterSpacing3);
3939
});
4040
});

‎packages/render-html/src/__tests__/regression.344.css-inline-inheritance-override.test.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { StyleSheet } from 'react-native';
32
import RenderHTML from '../RenderHTML';
43
import { render } from '@testing-library/react-native';
54

@@ -24,7 +23,7 @@ describe('RenderHTML component should pass regression #344', () => {
2423
/>
2524
);
2625
const text = getByTestId('a');
27-
expect(StyleSheet.flatten(text.props.style)).toMatchObject({
26+
expect(text).toHaveStyle({
2827
color: 'green'
2928
});
3029
});

0 commit comments

Comments
 (0)