fix(gatsby-remark-copy-linked-files): Support MDX by visiting JSX nod…

…es (#13552)

* Visit both html and jsx nodes to support mdx

* Babel transform remark-mdx so that node6 tests pass

* Skip the test instead of transforming remark-mdx

* Only import remark-mdx on node >=8

* Just move the require inside the test

packages/gatsby-remark-copy-linked-files/package.json

@@ -20,7 +20,10 @@
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
     "babel-preset-gatsby-package": "^0.1.4",
-    "cross-env": "^5.1.4"
+    "cross-env": "^5.1.4",
+    "remark": "^10.0.1",
+    "remark-mdx": "^1.0.14",
+    "semver": "^6.0.0"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-copy-linked-files#readme",
   "keywords": [

packages/gatsby-remark-copy-linked-files/src/__tests__/index.js

@@ -8,6 +8,7 @@ jest.mock(`fs-extra`, () => {
 const Remark = require(`remark`)
 const fsExtra = require(`fs-extra`)
 const path = require(`path`)
+const semver = require(`semver`)
 
 const plugin = require(`../`)
 
@@ -19,6 +20,15 @@ const remark = new Remark().data(`settings`, {
 
 const imageURL = markdownAST => markdownAST.children[0].children[0].url
 
+const testInNode8OrHigher = (title, ...args) => {
+  const isNode8OrHigher = semver.satisfies(process.version, `>=8`)
+  if (isNode8OrHigher) {
+    it(title, ...args)
+  } else {
+    it.skip(`skipped on Node 7 or lower: ${title}`, ...args)
+  }
+}
+
 describe(`gatsby-remark-copy-linked-files`, () => {
   afterEach(() => {
     fsExtra.copy.mockReset()
@@ -122,6 +132,24 @@ describe(`gatsby-remark-copy-linked-files`, () => {
     expect(fsExtra.copy).toHaveBeenCalled()
   })
 
+  testInNode8OrHigher(`can copy JSX images`, async () => {
+    const mdx = require(`remark-mdx`)
+    const path = `images/sample-image.gif`
+
+    const markdownAST = remark()
+      .use(mdx)
+      .parse(`<img src="${path}" />`)
+
+    await plugin({
+      files: getFiles(path),
+      markdownAST,
+      markdownNode,
+      getNode,
+    })
+
+    expect(fsExtra.copy).toHaveBeenCalled()
+  })
+
   it(`can copy HTML multiple images`, async () => {
     const path1 = `images/sample-image.gif`
     const path2 = `images/another-sample-image.gif`

packages/gatsby-remark-copy-linked-files/src/index.js

@@ -203,7 +203,7 @@ module.exports = (
   })
 
   // For each HTML Node
-  visit(markdownAST, `html`, node => {
+  visit(markdownAST, [`html`, `jsx`], node => {
     const $ = cheerio.load(node.value)
 
     function processUrl({ url }) {