Framework: Remove async component loader from import source

server/bundler/babel/babel-plugin-transform-wpcalypso-async/index.js

@@ -3,11 +3,29 @@
  */
 const kebabCase = require( 'lodash/kebabCase' );
 
+/**
+ * Constants
+ */
+const RX_ASYNC_LOADER = /^async-component!/;
+
 module.exports = ( babel ) => {
 	const t = babel.types;
 
 	return {
 		visitor: {
+			ImportDeclaration( path ) {
+				// This is a hacky solution to the issue where Mocha becomes
+				// confused by `async-component` Webpack loader, since we do
+				// not run modules through Webpack for tests.
+				if ( ! RX_ASYNC_LOADER.test( path.node.source.value ) ) {
+					return;
+				}
+
+				return path.replaceWith( t.importDeclaration(
+					path.node.specifiers,
+					t.stringLiteral( path.node.source.value.replace( RX_ASYNC_LOADER, '' ) )
+				) );
+			},
 			JSXAttribute( path ) {
 				// We only transform the require prop on AsyncLoad components.
 				// The component could have been imported under a different

server/bundler/babel/babel-plugin-transform-wpcalypso-async/test/index.js

@@ -13,6 +13,20 @@ describe( 'babel-plugin-transform-wpcalypso-async', () => {
 		} ).code;
 	}
 
+	describe( 'import foo from "async-component!foo";', () => {
+		it( 'should not transform other imports', () => {
+			const code = transform( 'import foo from "foo";' );
+
+			expect( code ).to.equal( 'import foo from "foo";' );
+		} );
+
+		it( 'should remove async-component loader for source', () => {
+			const code = transform( 'import foo from "async-component!foo";' );
+
+			expect( code ).to.equal( 'import foo from "foo";' );
+		} );
+	} );
+
 	describe( '<AsyncLoad require />', () => {
 		it( 'should not transform other components', () => {
 			const code = transform( '<div require="foo" />' );