Skip to content

Commit a883aab

Browse files
wojtekmajwojtekmaj
committed
Replace Enzyme with React Testing Library (#189)
1 parent aeed215 commit a883aab

File tree

7 files changed

+869
-1152
lines changed

7 files changed

+869
-1152
lines changed

‎jest.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"collectCoverageFrom": ["**/src/**.{js,jsx}", "!**/src/entry.js", "!**/src/entry.nostyle.js"],
3-
"setupFiles": ["<rootDir>/jest.setup.js"],
3+
"setupFilesAfterEnv": ["@testing-library/jest-dom"],
44
"testEnvironment": "jsdom"
55
}

‎jest.setup.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
"@babel/core": "^7.15.0",
4949
"@babel/preset-env": "^7.15.0",
5050
"@babel/preset-react": "^7.14.0",
51-
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
52-
"enzyme": "^3.10.0",
51+
"@testing-library/jest-dom": "^5.15.0",
52+
"@testing-library/react": "^12.1.0",
5353
"eslint": "^8.5.0",
5454
"eslint-config-wojtekmaj": "^0.6.5",
5555
"husky": "^8.0.0",

‎src/DateTimeInput.spec.jsx‎

Lines changed: 364 additions & 362 deletions
Large diffs are not rendered by default.

‎src/DateTimeInput/NativeInput.spec.jsx‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { shallow } from 'enzyme';
2+
import { render } from '@testing-library/react';
33

44
import NativeInput from './NativeInput';
55

@@ -10,89 +10,91 @@ describe('NativeInput', () => {
1010
};
1111

1212
it('renders an input', () => {
13-
const component = shallow(<NativeInput {...defaultProps} />);
13+
const { container } = render(<NativeInput {...defaultProps} />);
1414

15-
const input = component.find('input');
15+
const input = container.querySelector('input');
1616

17-
expect(input).toHaveLength(1);
17+
expect(input).toBeInTheDocument();
1818
});
1919

2020
it('applies given aria-label properly', () => {
2121
const nativeInputAriaLabel = 'Date';
2222

23-
const component = shallow(<NativeInput {...defaultProps} ariaLabel={nativeInputAriaLabel} />);
23+
const { container } = render(
24+
<NativeInput {...defaultProps} ariaLabel={nativeInputAriaLabel} />,
25+
);
2426

25-
const select = component.find('input');
27+
const input = container.querySelector('input');
2628

27-
expect(select.prop('aria-label')).toBe(nativeInputAriaLabel);
29+
expect(input).toHaveAttribute('aria-label', nativeInputAriaLabel);
2830
});
2931

3032
it('has proper name defined', () => {
3133
const name = 'testName';
3234

33-
const component = shallow(<NativeInput {...defaultProps} name={name} />);
35+
const { container } = render(<NativeInput {...defaultProps} name={name} />);
3436

35-
const input = component.find('input');
37+
const input = container.querySelector('input');
3638

37-
expect(input.prop('name')).toBe(name);
39+
expect(input).toHaveAttribute('name', name);
3840
});
3941

42+
// TODO: Investigate why ".000" is added here
4043
it.each`
4144
valueType | parsedValue
42-
${'second'} | ${'2017-09-30T22:17:41'}
45+
${'second'} | ${'2017-09-30T22:17:41.000'}
4346
${'minute'} | ${'2017-09-30T22:17'}
4447
${'hour'} | ${'2017-09-30T22:00'}
4548
`('displays given value properly if valueType is $valueType', ({ valueType, parsedValue }) => {
4649
const value = new Date(2017, 8, 30, 22, 17, 41);
4750

48-
const component = shallow(
51+
const { container } = render(
4952
<NativeInput {...defaultProps} value={value} valueType={valueType} />,
5053
);
5154

52-
const input = component.find('input');
55+
const input = container.querySelector('input');
5356

54-
expect(input.prop('value')).toBe(parsedValue);
57+
expect(input).toHaveValue(parsedValue);
5558
});
56-
/* eslint-enable indent */
5759

5860
it('does not disable input by default', () => {
59-
const component = shallow(<NativeInput {...defaultProps} />);
61+
const { container } = render(<NativeInput {...defaultProps} />);
6062

61-
const input = component.find('input');
63+
const input = container.querySelector('input');
6264

63-
expect(input.prop('disabled')).toBeFalsy();
65+
expect(input).not.toBeDisabled();
6466
});
6567

6668
it('disables input given disabled flag', () => {
67-
const component = shallow(<NativeInput {...defaultProps} disabled />);
69+
const { container } = render(<NativeInput {...defaultProps} disabled />);
6870

69-
const input = component.find('input');
71+
const input = container.querySelector('input');
7072

71-
expect(input.prop('disabled')).toBeTruthy();
73+
expect(input).toBeDisabled();
7274
});
7375

7476
it('is not required input by default', () => {
75-
const component = shallow(<NativeInput {...defaultProps} />);
77+
const { container } = render(<NativeInput {...defaultProps} />);
7678

77-
const input = component.find('input');
79+
const input = container.querySelector('input');
7880

79-
expect(input.prop('required')).toBeFalsy();
81+
expect(input).not.toBeRequired();
8082
});
8183

8284
it('required input given required flag', () => {
83-
const component = shallow(<NativeInput {...defaultProps} required />);
85+
const { container } = render(<NativeInput {...defaultProps} required />);
8486

85-
const input = component.find('input');
87+
const input = container.querySelector('input');
8688

87-
expect(input.prop('required')).toBeTruthy();
89+
expect(input).toBeRequired();
8890
});
8991

9092
it('has no min by default', () => {
91-
const component = shallow(<NativeInput {...defaultProps} />);
93+
const { container } = render(<NativeInput {...defaultProps} />);
9294

93-
const input = component.find('input');
95+
const input = container.querySelector('input');
9496

95-
expect(input.prop('min')).toBeFalsy();
97+
expect(input).not.toHaveAttribute('min');
9698
});
9799

98100
it.each`
@@ -103,17 +105,17 @@ describe('NativeInput', () => {
103105
`(
104106
'has proper min for minDate which is a full hour if valueType is $valueType',
105107
({ valueType, parsedMin }) => {
106-
const component = shallow(
108+
const { container } = render(
107109
<NativeInput
108110
{...defaultProps}
109111
minDate={new Date(2017, 8, 30, 22, 0, 0)}
110112
valueType={valueType}
111113
/>,
112114
);
113115

114-
const input = component.find('input');
116+
const input = container.querySelector('input');
115117

116-
expect(input.prop('min')).toBe(parsedMin);
118+
expect(input).toHaveAttribute('min', parsedMin);
117119
},
118120
);
119121

@@ -125,26 +127,26 @@ describe('NativeInput', () => {
125127
`(
126128
'has proper min for minDate which is not a full hour if valueType is $valueType',
127129
({ valueType, parsedMin }) => {
128-
const component = shallow(
130+
const { container } = render(
129131
<NativeInput
130132
{...defaultProps}
131133
minDate={new Date(2017, 8, 30, 22, 17, 41)}
132134
valueType={valueType}
133135
/>,
134136
);
135137

136-
const input = component.find('input');
138+
const input = container.querySelector('input');
137139

138-
expect(input.prop('min')).toBe(parsedMin);
140+
expect(input).toHaveAttribute('min', parsedMin);
139141
},
140142
);
141143

142144
it('has no max by default', () => {
143-
const component = shallow(<NativeInput {...defaultProps} />);
145+
const { container } = render(<NativeInput {...defaultProps} />);
144146

145-
const input = component.find('input');
147+
const input = container.querySelector('input');
146148

147-
expect(input.prop('max')).toBeFalsy();
149+
expect(input).not.toHaveAttribute('max');
148150
});
149151

150152
it.each`
@@ -155,17 +157,17 @@ describe('NativeInput', () => {
155157
`(
156158
'has proper max for maxDate which is a full hour if valueType is $valueType',
157159
({ valueType, parsedMax }) => {
158-
const component = shallow(
160+
const { container } = render(
159161
<NativeInput
160162
{...defaultProps}
161163
maxDate={new Date(2017, 8, 30, 22, 0, 0)}
162164
valueType={valueType}
163165
/>,
164166
);
165167

166-
const input = component.find('input');
168+
const input = container.querySelector('input');
167169

168-
expect(input.prop('max')).toBe(parsedMax);
170+
expect(input).toHaveAttribute('max', parsedMax);
169171
},
170172
);
171173

@@ -177,17 +179,17 @@ describe('NativeInput', () => {
177179
`(
178180
'has proper max for maxDate which is not a full hour if valueType is $valueType',
179181
({ valueType, parsedMax }) => {
180-
const component = shallow(
182+
const { container } = render(
181183
<NativeInput
182184
{...defaultProps}
183185
maxDate={new Date(2017, 8, 30, 22, 17, 41)}
184186
valueType={valueType}
185187
/>,
186188
);
187189

188-
const input = component.find('input');
190+
const input = container.querySelector('input');
189191

190-
expect(input.prop('max')).toBe(parsedMax);
192+
expect(input).toHaveAttribute('max', parsedMax);
191193
},
192194
);
193195
});

0 commit comments

Comments
 (0)