MUI5 无法使用 jest - SyntaxError：无法在模块外部使用 import 语句

Question

可重现的存储库：https ://github.com/hutber/cannotusestatement

\n

更令人担忧的是： https: //codesandbox.io/s/vigilant-bartik-bmz8x在沙箱中测试通过。但是，如果您检查导入到此沙箱中的上述存储库，它将不会在本地通过。

\n

我毫不怀疑问题是我的笑话没有编译运行我的测试所需的node_modules。但我现在不知道如何让它发挥作用。

\n

我只是希望能够运行测试。他们目前不运行

\n

测试

\n

import React from \'react\'\nimport { renderWithThemeProvider, screen } from \'test-utils\'\nimport { Select } from \'./Select\'\n\nit(\'renders correctly\', () => {\n  const tree = renderWithThemeProvider(<Select id="testSelect"></Select>)\n  expect(tree).toMatchSnapshot()\n})\n

\n

笑话配置.js

\n

module.exports = {\n  roots: [\'<rootDir>\', \'./src\'],\n  moduleDirectories: [\'<rootDir>\', \'node_modules/\', \'./src\'],\n  transform: {\n    \'^.+\\\\.(ts|tsx)$\': \'ts-jest\',\n  },\n  testEnvironment: \'jsdom\',\n  testMatch: [\'**/*.test.(ts|tsx)\', \'**/__tests__/*.(ts|tsx)\'],\n  moduleNameMapper: {\n    // Mocks out all these file formats when tests are run\n    \'\\\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$\': \'identity-obj-proxy\',\n    \'\\\\.(css|less|scss|sass)$\': \'identity-obj-proxy\',\n    \'app-config\': \'<rootDir>/app-config/default\',\n    \'^@components(.*)$\': \'<rootDir>/src/components$1\',\n    \'^@themes(.*)$\': \'<rootDir>/src/themes$1\',\n  },\n  coverageThreshold: {\n    global: {\n      statements: 50,\n    },\n  },\n}\n

\n

babel.config.js

\n

module.exports = {\n  presets: [\'@babel/preset-env\', \'@babel/preset-react\'],\n  env: {\n    test: {\n      presets: [\'@babel/preset-env\', \'@babel/preset-react\'],\n      plugins: [\n        [\n        \'babel-plugin-transform-imports\',\n        \'@babel/plugin-proposal-class-properties\',\n        \'transform-es2015-modules-commonjs\',\n        \'babel-plugin-dynamic-import-node\',\n        \'babel-plugin-styled-components\',\n      ],\n    },\n  },\n}\n

\n

包.json

\n

"test": "jest --watchAll=false",\n

\n

纱线测试

\n

(base) hutber@hutber:/var/www/target/component-library$ yarn test src/components/Select/Select.test.tsx\nyarn run v1.22.17\n$ jest --watchAll=false src/components/Select/Select.test.tsx\n FAIL  src/components/Select/Select.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here\'s what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You\'ll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n    /var/www/target/component-library/node_modules/@mui/material/styles/styled.js:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { createStyled, shouldForwardProp } from \'@mui/system\';\n                                                                                      ^^^^^^\n\n    SyntaxError: Cannot use import statement outside a module\n\n      1 | import React from \'react\'\n    > 2 | import styled from \'@mui/material/styles/styled\'\n        | ^\n      3 |\n      4 | import MuiSelect, { SelectProps as MuiSelectProps } from \'@mui/material/Select\'\n      5 | import InputLabel from \'@mui/material/InputLabel\'\n\n      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)\n      at Object.<anonymous> (src/components/Select/Select.tsx:2:1)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        3.272 s\n

\n

\n

import React from \'react\'\nimport styled from \'@mui/material/styles/styled\'\n\nimport MuiSelect, { SelectProps as MuiSelectProps } from \'@mui/material/Select\'\nimport InputLabel from \'@mui/material/InputLabel\'\nimport MenuItem from \'@mui/material/MenuItem\'\nimport MuiFormControl from \'@mui/material/FormControl\'\n\ninterface ISelect extends MuiSelectProps {\n  id: string\n  label?: string\n  options?: { text: string; option: string }[]\n}\nconst FormControl = styled(MuiFormControl)`\n  color: #fff;\n  border-radius: 30px;\n  width: 180px;\n`\n\nexport const Select: React.FC<ISelect> = ({ label, id, children, options, ...props }) => {\n  return (\n    // @ts-ignore\n    <FormControl fullWidth hiddenLabel>\n      {label && (\n        <InputLabel id={`input_${id}`} shrink={false}>\n          {label}\n        </InputLabel>\n      )}\n      <MuiSelect id={id} {...props}>\n        {options && options.map(({ text, option }: { text: string; option: string }) => <MenuItem value={option}>{text}</MenuItem>)}\n        {children && children}\n      </MuiSelect>\n    </FormControl>\n  )\n}\n\nexport default Select\n

\n

Answer 1

首先，您的Select.tsx文件中有两个导出。只需使用默认导出，因此将第 20 行更改为：

const Select: React.FC<ISelect> = ({ label, id, children, options, ...props }) => {

然后在你的Select.test.tsx文件中更改为：

import Select from './Select'

最后，为了解决导入问题，将代码更改为Select.tsx：

import { styled } from '@mui/material'

这是一个相当常见的问题，可以在这个mui-org GitHub 链接中看到。