Jest модульное тестирование компонента Svelte с использованием результатов svelte-material-ui в SyntaxError: Невозможно использовать оператор импорта вне модуля - PullRequest
Новая
       48

Jest модульное тестирование компонента Svelte с использованием результатов svelte-material-ui в SyntaxError: Невозможно использовать оператор импорта вне модуля

0 голосов
/ 03 апреля 2020

Я пытаюсь протестировать компоненты Svelte с помощью Jest. Когда эти компоненты импортируют компоненты @smui (https://github.com/hperrin/svelte-material-ui), при запуске Jest выдается ошибка:

SyntaxError: Cannot use import statement outside a module

Импорт других узловых модулей или других компонентов Svelte проходит нормально , Запущенный узел v13.12.0. Установлен ли node-sass в node_modules.

Ошибка, по-видимому, в файле index. js в node_modules/@smui/button, содержащем операторы импорта и экспорта, например import './_index.scss';.

Есть идеи?

rollup.config. js

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) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
const postcssOptions = () => ({
  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 && babel({
                extensions: ['.js', '.mjs', '.html', '.svelte'],
                runtimeHelpers: true,
                exclude: ['node_modules/@babel/**'],
                presets: [
                    ['@babel/preset-env', {
                        targets: '> 0.25%, not dead'
                    }]
                ],
                plugins: [
                    '@babel/plugin-syntax-dynamic-import',
                    ['@babel/plugin-transform-runtime', {
                        useESModules: true
                    }]
                ]
            }),

            !dev && 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 && terser()
        ],

        onwarn,
    }
};

jest.config. js

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"],
};

babel.config. js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
  ],
};

. / Src / components / Button.svelte (проверяемый компонент) 

<script>
  import Button from "@smui/button";
  export let text;
</script>

<button>{text}</button>

. / Tests / button.spe c. js

import { render, cleanup } from "@testing-library/svelte";
import Button from "../src/components/Button.svelte";

describe("button component", () => {
  afterEach(() => {
    cleanup();
  }); // Default on import: runs it after each test.

  test("should render component correctly", () => {
    const test = "testing";

    const { container } = render(Button, {
      props: {
        text: test,
      },
    });

    expect(container).toContainHTML(`<button>${test}</button>`);
  });
});

Ошибка при работе jest tests

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './_index.scss';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | <script type="module">
    > 2 |   import Button from "@smui/button";
        |                ^
      3 |   export let text;
      4 | </script>
      5 | 

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1085:14)
      at Object.<anonymous> (src/components/Button.svelte:2:16)

Репо: https://github.com/darryl-snow/sapper-test

1 Ответ

0 голосов
/ 03 апреля 2020

Я добавил это в jest.config. js, чтобы исправить это: 

"moduleNameMapper": {
  "^.+\\.(css|less|scss)$": "babel-jest"
}
...