Components: Refactor tests away from chai (#63754)

client/components/close-on-escape/test/index.jsx

@@ -1,10 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-
-import { expect } from 'chai';
 import { mount, shallow } from 'enzyme';
-import { spy } from 'sinon';
 import CloseOnEscape from '../';
 
 const simulateEscapeKeydown = () =>
@@ -14,13 +11,13 @@ describe( 'CloseOnEscape', () => {
 	describe( 'rendering', () => {
 		test( 'renders nothing', () => {
 			const wrapper = shallow( <CloseOnEscape /> );
-			expect( wrapper.type() ).to.be.a( 'null' );
+			expect( wrapper.type() ).toBe( null );
 		} );
 	} );
 
 	describe( 'escape keydown event', () => {
 		test( 'calls the `onEscape` method of stacked components in LIFO order on each escape keydown', () => {
-			const onEscapeSpy = spy();
+			const onEscapeSpy = jest.fn();
 
 			const wrapper1 = mount(
 				<CloseOnEscape
@@ -41,11 +38,11 @@ describe( 'CloseOnEscape', () => {
 			);
 
 			simulateEscapeKeydown();
-			expect( onEscapeSpy ).to.have.been.calledWith( 2 );
-			expect( onEscapeSpy ).not.to.have.been.calledWith( 1 );
+			expect( onEscapeSpy ).toHaveBeenCalledWith( 2 );
+			expect( onEscapeSpy ).not.toHaveBeenCalledWith( 1 );
 
 			simulateEscapeKeydown();
-			expect( onEscapeSpy ).to.have.been.calledWith( 1 );
+			expect( onEscapeSpy ).toHaveBeenCalledWith( 1 );
 		} );
 	} );
 } );

client/components/count/test/index.jsx

@@ -1,17 +1,15 @@
-import { expect } from 'chai';
 import { shallow } from 'enzyme';
-import { spy } from 'sinon';
 import { Count } from '../';
 
 describe( 'Count', () => {
 	test( 'should use the correct class name', () => {
 		const count = shallow( <Count count={ 23 } numberFormat={ ( string ) => string } /> );
-		expect( count.hasClass( 'count' ) ).to.equal( true );
+		expect( count.hasClass( 'count' ) ).toBe( true );
 	} );
 
 	test( 'should call provided as prop numberFormat function', () => {
-		const numberFormatSpy = spy();
+		const numberFormatSpy = jest.fn();
 		shallow( <Count count={ 23 } numberFormat={ numberFormatSpy } /> );
-		expect( numberFormatSpy ).to.have.been.calledWith( 23 );
+		expect( numberFormatSpy ).toHaveBeenCalledWith( 23 );
 	} );
 } );

client/components/d3-base/test/index.js

@@ -2,7 +2,6 @@
  * @jest-environment jsdom
  */
 
-import { assert } from 'chai';
 import { shallow, mount } from 'enzyme';
 import D3Base from '..';
 
@@ -14,15 +13,15 @@ describe( 'D3base', () => {
 	test( 'should have d3-base CSS class', () => {
 		const base = shallowWithoutLifecycle( <D3Base drawChart={ noop } getParams={ noop } /> );
 
-		assert.lengthOf( base.find( '.d3-base' ), 1 );
+		expect( base.find( '.d3-base' ).length ).toBe( 1 );
 	} );
 
 	test( 'should render an svg', () => {
 		const getParams = () => ( { width: 100, height: 100 } );
 
 		const base = mount( <D3Base drawChart={ noop } getParams={ getParams } /> );
 
-		assert.lengthOf( base.render().find( 'svg' ), 1 );
+		expect( base.render().find( 'svg' ).length ).toBe( 1 );
 	} );
 
 	test( 'should render a result of the drawChart prop', () => {
@@ -37,7 +36,7 @@ describe( 'D3base', () => {
 
 		const base = mount( <D3Base drawChart={ drawChart } getParams={ getParams } /> );
 
-		assert.lengthOf( base.render().find( 'circle' ), 1 );
+		expect( base.render().find( 'circle' ).length ).toBe( 1 );
 	} );
 
 	test( 'should pass a property of getParams output to drawChart function', () => {
@@ -51,6 +50,6 @@ describe( 'D3base', () => {
 
 		const base = mount( <D3Base drawChart={ drawChart } getParams={ getParams } /> );
 
-		assert.lengthOf( base.render().find( 'circle' ), 1 );
+		expect( base.render().find( 'circle' ).length ).toBe( 1 );
 	} );
 } );

client/components/data/media-list-data/test/index.jsx

@@ -1,8 +1,6 @@
 /**
  * @jest-environment jsdom
  */
-
-import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import { MediaListData } from 'calypso/components/data/media-list-data';
 
@@ -26,7 +24,7 @@ describe( 'EditorMediaModal', () => {
 		const query = { search: true };
 		const result = tree.getQuery( query );
 
-		expect( result ).to.eql( query );
+		expect( result ).toEqual( query );
 	} );
 
 	test( 'should pass and process filter parameter to media query', () => {
@@ -38,7 +36,7 @@ describe( 'EditorMediaModal', () => {
 		const query = { filter: 'images' };
 		const result = tree.getQuery( query );
 
-		expect( result ).to.eql( { mime_type: 'image/' } );
+		expect( result ).toEqual( { mime_type: 'image/' } );
 	} );
 
 	test( 'should pass and process filter parameter for google photos', () => {
@@ -50,7 +48,7 @@ describe( 'EditorMediaModal', () => {
 		const query = { filter: 'images', source: 'google_photos' };
 		const result = tree.getQuery( query );
 
-		expect( result ).to.eql( {
+		expect( result ).toEqual( {
 			source: 'google_photos',
 			path: 'recent',
 			filter: [ 'mediaType=photo' ],
@@ -66,7 +64,7 @@ describe( 'EditorMediaModal', () => {
 		const query = { filter: 'images', source: 'pexels' };
 		const result = tree.getQuery( query );
 
-		expect( result ).to.eql( { source: 'pexels', path: 'recent' } );
+		expect( result ).toEqual( { source: 'pexels', path: 'recent' } );
 	} );
 
 	test( 'should pass source parameter and set recent path to media query', () => {
@@ -78,7 +76,7 @@ describe( 'EditorMediaModal', () => {
 		const query = { source: 'anything' };
 		const result = tree.getQuery( query );
 
-		expect( result ).to.eql( { path: 'recent', source: 'anything' } );
+		expect( result ).toEqual( { path: 'recent', source: 'anything' } );
 	} );
 
 	test( 'should pass categoryFilter parameter to media query for Google Photos', () => {
@@ -90,7 +88,7 @@ describe( 'EditorMediaModal', () => {
 		const query = { categoryFilter: 'cats', source: 'google_photos' };
 		const result = tree.getQuery( query );
 
-		expect( result ).to.eql( {
+		expect( result ).toEqual( {
 			filter: [ 'categoryInclude=cats' ],
 			path: 'recent',
 			source: 'google_photos',
@@ -106,6 +104,6 @@ describe( 'EditorMediaModal', () => {
 		const query = { categoryFilter: 'cats', source: '' };
 		const result = tree.getQuery( query );
 
-		expect( result ).to.eql( {} );
+		expect( result ).toEqual( {} );
 	} );
 } );

client/components/data/media-list-data/test/utils.js

@@ -1,56 +1,55 @@
-import { expect } from 'chai';
 import utils from '../utils';
 
 describe( 'utils', () => {
 	describe( '#getMimeBaseTypeFromFilter()', () => {
 		test( 'should return an empty string for an unknown filter', () => {
 			const baseType = utils.getMimeBaseTypeFromFilter( 'unknown' );
 
-			expect( baseType ).to.equal( '' );
+			expect( baseType ).toEqual( '' );
 		} );
 
 		test( 'should return "image/" for "images"', () => {
 			const baseType = utils.getMimeBaseTypeFromFilter( 'images' );
 
-			expect( baseType ).to.equal( 'image/' );
+			expect( baseType ).toEqual( 'image/' );
 		} );
 
 		test( 'should return "audio/" for "audio"', () => {
 			const baseType = utils.getMimeBaseTypeFromFilter( 'audio' );
 
-			expect( baseType ).to.equal( 'audio/' );
+			expect( baseType ).toEqual( 'audio/' );
 		} );
 
 		test( 'should return "video/" for "videos"', () => {
 			const baseType = utils.getMimeBaseTypeFromFilter( 'videos' );
 
-			expect( baseType ).to.equal( 'video/' );
+			expect( baseType ).toEqual( 'video/' );
 		} );
 
 		test( 'should return "application/" for "documents"', () => {
 			const baseType = utils.getMimeBaseTypeFromFilter( 'documents' );
 
-			expect( baseType ).to.equal( 'application/' );
+			expect( baseType ).toEqual( 'application/' );
 		} );
 	} );
 
 	describe( '#convertMimeFilter()', () => {
 		test( 'show return video for videos type', () => {
 			const filter = utils.convertMimeFilter( 'videos' );
 
-			expect( filter ).to.equal( 'video' );
+			expect( filter ).toEqual( 'video' );
 		} );
 
 		test( 'show return photo for images type', () => {
 			const filter = utils.convertMimeFilter( 'images' );
 
-			expect( filter ).to.equal( 'photo' );
+			expect( filter ).toEqual( 'photo' );
 		} );
 
 		test( 'show return null for unsupported type', () => {
 			const filter = utils.convertMimeFilter( 'cats' );
 
-			expect( filter ).to.equal( null );
+			expect( filter ).toBeNull();
 		} );
 	} );
 
@@ -59,31 +58,31 @@ describe( 'utils', () => {
 			const original = { source: 'google_photos' };
 			const google = utils.getGoogleQuery( original, {} );
 
-			expect( google ).to.eql( original );
+			expect( google ).toEqual( original );
 		} );
 
 		test( 'show return media type filter when supplied', () => {
 			const original = { filter: 'videos' };
 			const expected = { filter: [ 'mediaType=video' ] };
 			const google = utils.getGoogleQuery( {}, original );
 
-			expect( google ).to.eql( expected );
+			expect( google ).toEqual( expected );
 		} );
 
 		test( 'show return category filter when supplied', () => {
 			const original = { categoryFilter: 'cats' };
 			const expected = { filter: [ 'categoryInclude=cats' ] };
 			const google = utils.getGoogleQuery( {}, original );
 
-			expect( google ).to.eql( expected );
+			expect( google ).toEqual( expected );
 		} );
 
 		test( 'show return category and media type filter when supplied', () => {
 			const original = { categoryFilter: 'cats', filter: 'videos' };
 			const expected = { filter: [ 'mediaType=video', 'categoryInclude=cats' ] };
 			const google = utils.getGoogleQuery( {}, original );
 
-			expect( google ).to.eql( expected );
+			expect( google ).toEqual( expected );
 		} );
 	} );
 } );

client/components/domains/domain-suggestion/test/index.js

@@ -2,7 +2,6 @@
  * @jest-environment jsdom
  */
 
-import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import DomainSuggestion from 'calypso/components/domains/domain-suggestion';
 
@@ -21,7 +20,7 @@ describe( 'Domain Suggestion', () => {
 				/>
 			);
 
-			expect( domainSuggestion.props()[ 'data-e2e-domain' ] ).to.equal( 'example.com' );
+			expect( domainSuggestion.props()[ 'data-e2e-domain' ] ).toEqual( 'example.com' );
 		} );
 	} );
 } );

client/components/domains/registrant-extra-info/test/fr-form.js

@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 import { sanitizeVat } from '../fr-form';
 
 describe( 'fr-form', () => {
@@ -14,7 +13,7 @@ describe( 'fr-form', () => {
 			];
 
 			vatPatterns.forEach( ( { before, after } ) =>
-				expect( sanitizeVat( before ) ).to.eql( after )
+				expect( sanitizeVat( before ) ).toEqual( after )
 			);
 		} );
 
@@ -66,8 +65,8 @@ describe( 'fr-form', () => {
 				[ 'GBHA9997' ],
 			];
 
-			validVatPatterns.forEach( ( [ pattern, description ] ) =>
-				expect( sanitizeVat( pattern ) ).to.eql( pattern.toUpperCase(), description )
+			validVatPatterns.forEach( ( [ pattern ] ) =>
+				expect( sanitizeVat( pattern ) ).toEqual( pattern.toUpperCase() )
 			);
 		} );
 	} );