title: Jest unit test of Svelte component using svelte-material-ui results in SyntaxError: Cannot use import statement outside a module
body: <p>I'm trying to unit test my Svelte components using Jest. When those components import @smui components (<a href="https://github.com/hperrin/svelte-material-ui" rel="nofollow noreferrer">https://github.com/hperrin/svelte-material-ui</a>), running Jest throws an error:</p>
  
  <p><code>SyntaxError: Cannot use import statement outside a module</code></p>
  
  <p>Importing other node modules or other Svelte components runs fine. Running node v13.12.0. Have node-sass installed in node_modules.</p>
  
  <p>The error seems to be by the index.js file within <code>node_modules/@smui/button</code> containing import and export statements like <code>import './_index.scss';</code>.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>rollup.config.js</strong></p>
  
  <pre><code>import resolve from '@rollup/plugin-node-resolve';
  import replace from '@rollup/plugin-replace';
  import commonjs from '@rollup/plugin-commonjs';
  import svelte from 'rollup-plugin-svelte';
  import postcss from 'rollup-plugin-postcss';
  import babel from 'rollup-plugin-babel';
  import { terser } from 'rollup-plugin-terser';
  import config from 'sapper/config/rollup.js';
  import pkg from './package.json';
  
  const mode = process.env.NODE_ENV;
  const dev = mode === 'development';
  const legacy = !!process.env.SAPPER_LEGACY_BUILD;
  
  const onwarn = (warning, onwarn) =&gt; (warning.code === 'CIRCULAR_DEPENDENCY' &amp;&amp; /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
  const postcssOptions = () =&gt; ({
    extensions: ['.scss', '.sass'],
    extract: false,
    minimize: true,
    use: [
      ['sass', {
        includePaths: [
          './src/theme',
          './node_modules',
        ]
      }]
    ]
  });
  
  export default {
      client: {
          input: config.client.input(),
          output: config.client.output(),
          plugins: [
              replace({
                  'process.browser': true,
                  'process.env.NODE_ENV': JSON.stringify(mode)
              }),
              svelte({
                  dev,
                  hydratable: true,
                  emitCss: true
              }),
              resolve({
                  browser: true,
                  dedupe: ['svelte']
              }),
              commonjs(),
  
        postcss(postcssOptions()),
  
              legacy &amp;&amp; babel({
                  extensions: ['.js', '.mjs', '.html', '.svelte'],
                  runtimeHelpers: true,
                  exclude: ['node_modules/@babel/**'],
                  presets: [
                      ['@babel/preset-env', {
                          targets: '&gt; 0.25%, not dead'
                      }]
                  ],
                  plugins: [
                      '@babel/plugin-syntax-dynamic-import',
                      ['@babel/plugin-transform-runtime', {
                          useESModules: true
                      }]
                  ]
              }),
  
              !dev &amp;&amp; terser({
                  module: true
              })
          ],
  
          onwarn,
      },
  
      server: {
          input: config.server.input(),
          output: config.server.output(),
          plugins: [
              replace({
                  'process.browser': false,
                  'process.env.NODE_ENV': JSON.stringify(mode)
              }),
              svelte({
                  generate: 'ssr',
                  dev
              }),
              resolve({
                  dedupe: ['svelte']
              }),
              commonjs(),
  
        postcss(postcssOptions())
          ],
          external: Object.keys(pkg.dependencies).concat(
              require('module').builtinModules || Object.keys(process.binding('natives'))
          ),
  
          onwarn,
      },
  
      serviceworker: {
          input: config.serviceworker.input(),
          output: config.serviceworker.output(),
          plugins: [
              resolve(),
              replace({
                  'process.browser': true,
                  'process.env.NODE_ENV': JSON.stringify(mode)
              }),
              commonjs(),
              !dev &amp;&amp; terser()
          ],
  
          onwarn,
      }
  };
  </code></pre>
  
  <p><strong>jest.config.js</strong></p>
  
  <pre><code>module.exports = {
    transform: {
      "^.+\\.svelte$": "jest-transform-svelte",
      "^.+\\.js$": "babel-jest",
    },
    moduleFileExtensions: ["js", "svelte"],
    testPathIgnorePatterns: ["node_modules"],
    bail: false,
    verbose: true,
    transformIgnorePatterns: ["node_modules"],
    setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
  };
  </code></pre>
  
  <p><strong>babel.config.js</strong></p>
  
  <pre><code>module.exports = {
    presets: [
      [
        "@babel/preset-env",
        {
          targets: {
            node: "current",
          },
        },
      ],
    ],
  };
  </code></pre>
  
  <p><strong>./src/components/Button.svelte</strong> (component to be tested)</p>
  
  <pre><code>&lt;script&gt;
    import Button from "@smui/button";
    export let text;
  &lt;/script&gt;
  
  &lt;button&gt;{text}&lt;/button&gt;
  </code></pre>
  
  <p><strong>./tests/button.spec.js</strong></p>
  
  <pre><code>import { render, cleanup } from "@testing-library/svelte";
  import Button from "../src/components/Button.svelte";
  
  describe("button component", () =&gt; {
    afterEach(() =&gt; {
      cleanup();
    }); // Default on import: runs it after each test.
  
    test("should render component correctly", () =&gt; {
      const test = "testing";
  
      const { container } = render(Button, {
        props: {
          text: test,
        },
      });
  
      expect(container).toContainHTML(`&lt;button&gt;${test}&lt;/button&gt;`);
    });
  });
  </code></pre>
  
  <p><strong>Error when running <code>jest tests</code></strong></p>
  
  <pre><code> ({"Object.&lt;anonymous&gt;":function(module,exports,require,__dirname,__filename,global,jest){import './_index.scss';
                                                                                               ^^^^^^
  
      SyntaxError: Cannot use import statement outside a module
  
        1 | &lt;script type="module"&gt;
      &gt; 2 |   import Button from "@smui/button";
          |                ^
        3 |   export let text;
        4 | &lt;/script&gt;
        5 | 
  
        at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1085:14)
        at Object.&lt;anonymous&gt; (src/components/Button.svelte:2:16)
  </code></pre>
  
  <p>Repo: <a href="https://github.com/darryl-snow/sapper-test" rel="nofollow noreferrer">https://github.com/darryl-snow/sapper-test</a></p>