Skip to content

Commit d01de25

Browse files
mihirsamdarshimihirsamdarshi
committed
test: update test to use Vitest
1 parent 035ce6f commit d01de25

File tree

11 files changed

+12858
-18061
lines changed

11 files changed

+12858
-18061
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,4 @@ src/__snapshots__/*
145145
# Build files
146146
build/
147147

148+
.yarnrc.yml

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"start": "vite",
4545
"build": "vite build",
4646
"serve": "vite preview",
47-
"test": "react-scripts test",
47+
"test": "vitest",
4848
"storybook": "storybook dev -p 9009",
4949
"build-storybook": "storybook build",
5050
"sass-lint": "stylelint --config=stylelint.config.js '**/*.scss'",
@@ -78,7 +78,9 @@
7878
"storybook-addon-remix-react-router": "^3.0.0",
7979
"stylelint": "^16.2.0",
8080
"stylelint-config-recommended": "^14.0.0",
81-
"vitest": "^1.4.0"
81+
"vite-plugin-image-optimizer": "^1.1.7",
82+
"vitest": "^1.4.0",
83+
"vitest-canvas-mock": "^0.3.3"
8284
},
8385
"resolutions": {
8486
"autoprefixer": "10.4.5"

‎src/AnalysisPage/__test__/analysisHomePage.test.jsx

+25-23
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ const loggedInRootState = {
2727
};
2828

2929
const analysisActions = {
30-
onPickAnalysis: jest.fn(),
31-
goBack: jest.fn(),
30+
onPickAnalysis: vi.fn(),
31+
goBack: vi.fn(),
3232
};
3333

3434
function constructMatchState(subject) {
@@ -46,19 +46,19 @@ function constructMatchState(subject) {
4646
describe('Pure Analysis Home Page', () => {
4747
test('Redirects to home if not logged in', () => {
4848
const shallowAnalysis = shallow(
49-
<AnalysisHomePage {...defaultAnalysisState} {...analysisActions} />
49+
<AnalysisHomePage {...defaultAnalysisState} {...analysisActions} />,
5050
);
51-
expect(shallowAnalysis.find('Redirect')).toHaveLength(1);
51+
expect(shallowAnalysis.find('Navigate')).toHaveLength(1);
5252
});
5353
test('Redirects if no url match (animal or human)', () => {
5454
const shallowAnalysis = shallow(
5555
<AnalysisHomePage
5656
{...defaultAnalysisState}
5757
{...analysisActions}
5858
loggedIn
59-
/>
59+
/>,
6060
);
61-
expect(shallowAnalysis.find('Redirect')).toHaveLength(1);
61+
expect(shallowAnalysis.find('Navigate')).toHaveLength(1);
6262
});
6363

6464
const matchingSubjects = [
@@ -78,7 +78,7 @@ describe('Pure Analysis Home Page', () => {
7878
<AnalysisHomePage
7979
{...constructMatchState(match)}
8080
{...analysisActions}
81-
/>
81+
/>,
8282
);
8383
expect(shallowAnalysis.find('Redirect')).toHaveLength(0);
8484
});
@@ -95,7 +95,7 @@ describe('Pure Analysis Home Page', () => {
9595
/>,
9696
);
9797
expect(shallowAnalysis.find('h3').text()).toEqual(
98-
expect.stringMatching(expected)
98+
expect.stringMatching(expected),
9999
);
100100
});
101101
});
@@ -116,21 +116,21 @@ describe('Pure Analysis Home Page', () => {
116116
});
117117

118118
describe('Connected Animal AnalysisPage', () => {
119-
let mountedAnalysis = mount((
119+
let mountedAnalysis = mount(
120120
<Provider store={createStore(rootReducer, loggedInRootState)}>
121121
<AnalysisHomePageConnected
122122
match={{ params: { subjectType: 'animal' } }}
123123
/>
124-
</Provider>
125-
));
124+
</Provider>,
125+
);
126126
beforeAll(() => {
127-
mountedAnalysis = mount((
127+
mountedAnalysis = mount(
128128
<Provider store={createStore(rootReducer, loggedInRootState)}>
129129
<AnalysisHomePageConnected
130130
match={{ params: { subjectType: 'animal' } }}
131131
/>
132-
</Provider>
133-
));
132+
</Provider>,
133+
);
134134
});
135135
afterAll(() => {
136136
mountedAnalysis.unmount();
@@ -144,7 +144,8 @@ describe('Connected Animal AnalysisPage', () => {
144144
// Click button --> replace analysisTypeButton with SubAnalysisButton
145145
mountedAnalysis.find('.activeAnalysis').first().simulate('click');
146146
expect(
147-
mountedAnalysis.find('Provider').props().store.getState().analysis.depth
147+
mountedAnalysis.find('Provider').props().store.getState().analysis
148+
.depth,
148149
).toEqual(1);
149150
mountedAnalysis.update();
150151
expect(mountedAnalysis.find('AnalysisCard')).toHaveLength(0);
@@ -153,7 +154,8 @@ describe('Connected Animal AnalysisPage', () => {
153154
// Click back button --> replace SubAnalysisButton with AnalysisTypeButton
154155
mountedAnalysis.find('.backButton').first().simulate('click');
155156
expect(
156-
mountedAnalysis.find('Provider').props().store.getState().analysis.depth
157+
mountedAnalysis.find('Provider').props().store.getState().analysis
158+
.depth,
157159
).toEqual(0);
158160
mountedAnalysis.update();
159161
expect(mountedAnalysis.find('AnimalDataAnalysis')).toHaveLength(0);
@@ -165,19 +167,19 @@ describe('Connected Animal AnalysisPage', () => {
165167
});
166168

167169
describe('Connected Human AnalysisPage', () => {
168-
let mountedAnalysis = mount((
170+
let mountedAnalysis = mount(
169171
<Provider store={createStore(rootReducer, loggedInRootState)}>
170172
<AnalysisHomePageConnected match={{ params: { subjectType: 'human' } }} />
171-
</Provider>
172-
));
173+
</Provider>,
174+
);
173175
beforeAll(() => {
174-
mountedAnalysis = mount((
176+
mountedAnalysis = mount(
175177
<Provider store={createStore(rootReducer, loggedInRootState)}>
176178
<AnalysisHomePageConnected
177179
match={{ params: { subjectType: 'human' } }}
178180
/>
179-
</Provider>
180-
));
181+
</Provider>,
182+
);
181183
});
182184
afterAll(() => {
183185
mountedAnalysis.unmount();
@@ -189,7 +191,7 @@ describe('Connected Human AnalysisPage', () => {
189191
expect(mountedAnalysis.find('.activeAnalysis')).toHaveLength(0);
190192
expect(mountedAnalysis.find('SubAnalysisCard')).toHaveLength(0);
191193
expect(
192-
mountedAnalysis.find('Provider').props().store.getState().analysis.depth
194+
mountedAnalysis.find('Provider').props().store.getState().analysis.depth,
193195
).toEqual(0);
194196
});
195197
});

‎src/App/__test__/App.test.jsx

+110-17
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import App from '../App';
66
import testUser from '../../testData/testUser.json';
77

88
// Mocking Google Analytics
9-
jest.mock('ga-gtag');
9+
vi.mock('ga-gtag');
1010

1111
// Mocking scrollTo
12-
window.scrollTo = jest.fn();
12+
window.scrollTo = vi.fn();
1313

1414
describe('<App />', () => {
1515
let component;
@@ -32,7 +32,14 @@ describe('<App />', () => {
3232
});
3333

3434
// No other routes render components, and only one component rendered
35-
function testCorrectComponentInPath(app, routeTag, componentName, path, history, auth = false) {
35+
function testCorrectComponentInPath(
36+
app,
37+
routeTag,
38+
componentName,
39+
path,
40+
history,
41+
auth = false,
42+
) {
3643
let noPath = true;
3744
// Checks the right component loaded at path and other components are not
3845
app.find(routeTag).forEach((route) => {
@@ -63,31 +70,61 @@ describe('Unauthenticated Application routing', () => {
6370
test('loads the landing page at /search', () => {
6471
history.push('/search');
6572
mountApp.update();
66-
testCorrectComponentInPath(mountApp, 'Route', 'SearchPage', '/search', history);
73+
testCorrectComponentInPath(
74+
mountApp,
75+
'Route',
76+
'SearchPage',
77+
'/search',
78+
history,
79+
);
6780
});
6881

6982
test('loads the browse data page at /data-download', () => {
7083
history.push('/data-download');
7184
mountApp.update();
72-
testCorrectComponentInPath(mountApp, 'Route', 'BrowseDataPage', '/data-download', history);
85+
testCorrectComponentInPath(
86+
mountApp,
87+
'Route',
88+
'BrowseDataPage',
89+
'/data-download',
90+
history,
91+
);
7392
});
7493

7594
test('loads the browse data page at /code-repositories', () => {
7695
history.push('/code-repositories');
7796
mountApp.update();
78-
testCorrectComponentInPath(mountApp, 'Route', 'CodeRepositories', '/code-repositories', history);
97+
testCorrectComponentInPath(
98+
mountApp,
99+
'Route',
100+
'CodeRepositories',
101+
'/code-repositories',
102+
history,
103+
);
79104
});
80105

81106
test('loads the browse data page at /project-overview', () => {
82107
history.push('/project-overview');
83108
mountApp.update();
84-
testCorrectComponentInPath(mountApp, 'Route', 'MainStudy', '/project-overview', history);
109+
testCorrectComponentInPath(
110+
mountApp,
111+
'Route',
112+
'MainStudy',
113+
'/project-overview',
114+
history,
115+
);
85116
});
86117

87118
test('loads the linkout page at /external-links', () => {
88119
history.push('/external-links');
89120
mountApp.update();
90-
testCorrectComponentInPath(mountApp, 'Route', 'LinkoutPage', '/external-links', history);
121+
testCorrectComponentInPath(
122+
mountApp,
123+
'Route',
124+
'LinkoutPage',
125+
'/external-links',
126+
history,
127+
);
91128
});
92129

93130
test('loads the team page at /team', () => {
@@ -99,13 +136,25 @@ describe('Unauthenticated Application routing', () => {
99136
test('loads the contact page at /contact', () => {
100137
history.push('/contact');
101138
mountApp.update();
102-
testCorrectComponentInPath(mountApp, 'Route', 'Contact', '/contact', history);
139+
testCorrectComponentInPath(
140+
mountApp,
141+
'Route',
142+
'Contact',
143+
'/contact',
144+
history,
145+
);
103146
});
104147

105148
test('loads the error page at /error', () => {
106149
history.push('/error');
107150
mountApp.update();
108-
testCorrectComponentInPath(mountApp, 'Route', 'ErrorPage', '/error', history);
151+
testCorrectComponentInPath(
152+
mountApp,
153+
'Route',
154+
'ErrorPage',
155+
'/error',
156+
history,
157+
);
109158
});
110159
});
111160

@@ -135,45 +184,89 @@ describe('Authenticated Application routing', () => {
135184
});
136185

137186
test('State should change to logged in on loginSuccess dispatch', () => {
138-
expect(mountApp.find('Provider').props().store.getState().auth.isAuthenticated).toBeTruthy();
187+
expect(
188+
mountApp.find('Provider').props().store.getState().auth.isAuthenticated,
189+
).toBeTruthy();
139190
});
140191

141192
test('loads the search page at /search', () => {
142193
history.push('/search');
143194
// Update required to re-render the application
144195
mountApp.update();
145-
testCorrectComponentInPath(mountApp, 'Route', 'SearchPage', '/search', history, true);
196+
testCorrectComponentInPath(
197+
mountApp,
198+
'Route',
199+
'SearchPage',
200+
'/search',
201+
history,
202+
true,
203+
);
146204
});
147205

148206
test('loads the QC reports at /qc-reports', () => {
149207
history.push('/qc-reports');
150208
// Update required to re-render the application
151209
mountApp.update();
152-
testCorrectComponentInPath(mountApp, 'AuthWrapper', 'DataStatusPage', '/qc-data-monitor', history, true);
210+
testCorrectComponentInPath(
211+
mountApp,
212+
'AuthWrapper',
213+
'DataStatusPage',
214+
'/qc-data-monitor',
215+
history,
216+
true,
217+
);
153218
});
154219

155220
test('loads the methods page at /methods', () => {
156221
history.push('/methods');
157222
// Update required to re-render the application
158223
mountApp.update();
159-
testCorrectComponentInPath(mountApp, 'AuthWrapper', 'Methods', '/methods', history, true);
224+
testCorrectComponentInPath(
225+
mountApp,
226+
'AuthWrapper',
227+
'Methods',
228+
'/methods',
229+
history,
230+
true,
231+
);
160232
});
161233

162234
test('loads the sample summary page at /summary', () => {
163235
history.push('/summary');
164236
mountApp.update();
165-
testCorrectComponentInPath(mountApp, 'AuthWrapper', 'DataSummaryPage', '/summary', history, true);
237+
testCorrectComponentInPath(
238+
mountApp,
239+
'AuthWrapper',
240+
'DataSummaryPage',
241+
'/summary',
242+
history,
243+
true,
244+
);
166245
});
167246

168247
test('loads the linkout page at /external-links', () => {
169248
history.push('/external-links');
170249
mountApp.update();
171-
testCorrectComponentInPath(mountApp, 'Route', 'LinkoutPage', '/external-links', history, true);
250+
testCorrectComponentInPath(
251+
mountApp,
252+
'Route',
253+
'LinkoutPage',
254+
'/external-links',
255+
history,
256+
true,
257+
);
172258
});
173259

174260
test('loads the team page at /team', () => {
175261
history.push('/team');
176262
mountApp.update();
177-
testCorrectComponentInPath(mountApp, 'Route', 'TeamPage', '/team', history, true);
263+
testCorrectComponentInPath(
264+
mountApp,
265+
'Route',
266+
'TeamPage',
267+
'/team',
268+
history,
269+
true,
270+
);
178271
});
179272
});

0 commit comments

Comments
 (0)