Jest + @testing-library/react 对来自 [dom-accessibility-api] 库的 .mjs 文件抛出错误

问题描述

我刚开始使用 Jest + @testing-library/react，在我第一次尝试时，我在第三方库上遇到错误（可能由 react-testing-library 使用），我不知道如何修复。

这是我对主要 React App.js 组件的测试。基本上，我尝试使用 Redux 存储来渲染它，然后验证 DOM 组件是否存在。非常简单：

import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react';
import { App } from '../../../src/features/root/App';
import { Provider } from "react-redux";
import { createStore } from "redux";
import { initialState } from '../../../src/features/root/redux/initialState';
import { reducer } from '../../../src/features/root/redux/reducer';

const renderWithProviders = (ui,{ reduxState } = {}) => {
  const store = createStore(reducer,reduxState || initialState);
  return render(<Provider store={store}>{ui}</Provider>);
}

describe('root/App',() => {

  it('renders node with correct class name',() => {
    const { getByTestId } = renderWithProviders(<App />,{ });
    const mainDiv = getByTestId('id-of-the-div');
    expect(mainDiv).toBeDefined();
  });
});

但是，在运行测试时，Jest 抛出以下错误：

Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse,e.g. it's not plain JavaScript.

By default,if Jest sees a Babel config,it will use that to transform your files,ignoring "node_modules".

Here's what you can do:
 • If you are trying to use ECMAScript Modules,see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
 • To have some of your "node_modules" files transformed,you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/sandbox/node_modules/dom-accessibility-api/dist/accessible-description.mjs:7
import { computeTextAlternative } from "./accessible-name-and-description.mjs";
^^^^^^

SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (node_modules/dom-accessibility-api/sources/index.ts:1:1)

所以这里的关键点如下：

/sandbox/node_modules/dom-accessibility-api/dist/accessible-description.mjs:7
import { computeTextAlternative } from "./accessible-name-and-description.mjs";
^^^^^^

SyntaxError: Cannot use import statement outside a module

看起来 Jest 无法解析该库 dom-accessibility-api 中的特定 .mjs 文件。但为什么会这样呢？在使用 react-testing-library 和 Jest 进行 React 测试的任何教程中，似乎没有关于此的问题或提及。这是一个我一无所知的第三方库。

有谁知道如何解决这个问题？ 我的主要配置文件：

babel.config.js：

const presets = [    
  'react-app'    
];

module.exports = { presets };

jest.config.js：（我尝试了很多选项和简化，但都无济于事）

module.exports = {
reporters: [
    "default","jest-junit"
  ],coverageReporters: [
    "lcov","text","cobertura"
  ],collectCoverageFrom: [
    "src/**/*.{js,jsx}"
  ],setupFiles: [        
    "<rootDir>/tests/setup.js","jest-localstorage-mock","jest-canvas-mock"
  ],snapshotSerializers: [
    "enzyme-to-json/serializer"
  ],testMatch: [
    "<rootDir>/tests/**/*.test.js"
  ],testEnvironment: "jsdom",testURL: "http://localhost",transform: {
    "^.+\\.(js|jsx)$": "babel-jest","^.+\\.(ts|tsx|mjs)$": "ts-jest","^.+\\.css$": "<rootDir>/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|mjs|css|json|ts)$)": "<rootDir>/config/jest/fileTransform.js"
  },transformIgnorePatterns: [
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|ts|tsx)$"
  ],testPathIgnorePatterns: ["<rootDir>/build/","<rootDir>/node_modules/"],moduleNameMapper: {
    "^react-native$": "react-native-web"
  },moduleFileExtensions: [
    "web.js","mjs","js","ts","json","web.jsx","jsx","node"
  ]  
}

/tests/setup.js：（只是为其他类型的测试初始化​​Enzyme）

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter(),disableLifecycleMethods: true });

/config/jest/fileTransform.js：

'use strict';

const path = require('path');

// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html

module.exports = {
  process(src,filename) {
    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  },};

package.json：（仅显示 devDependencies）

"devDependencies": {
 "@babel/core": "^7.12.10","@babel/preset-env": "^7.12.11","@babel/preset-react": "^7.12.10","@babel/preset-typescript": "^7.12.7","@testing-library/jest-dom": "^5.11.9","@testing-library/react": "^11.2.3","axios-mock-adapter": "^1.15.0","babel-eslint": "^10.1.0","babel-jest": "^26.6.3","babel-loader": "^8.2.2","babel-preset-react-app": "^10.0.0","babel-runtime": "^6.26.0","browser-refresh-taglib": "^1","case-sensitive-paths-webpack-plugin": "2.1.1","cross-env": "^5.2.0","enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.5","enzyme-to-json": "^3.6.1","eslint": "^7.17.0","eslint-config-react-app": "^6.0.0","eslint-loader": "^4.0.2","eslint-plugin-flowtype": "^5.2.0","eslint-plugin-import": "^2.22.1","eslint-plugin-jsx-a11y": "^6.4.1","eslint-plugin-react": "^7.22.0","eslint-plugin-react-hooks": "^4.2.0","extract-text-webpack-plugin": "3.0.2","html-webpack-plugin": "2.29.0","jest": "^26.6.3","jest-canvas-mock": "^2.2.0","jest-junit": "^5.2.0","jest-localstorage-mock": "^2.3.0","jest-when": "^2.7.0","nock": "^9.2.3","optimizer-plugin-inc": "^4","query-string": "5.1.1","react-dev-utils": "^5.0.0","redux-mock-store": "^1.5.4","redux-thunk": "^2.3.0","sw-precache-webpack-plugin": "0.11.4","ts-jest": "^26.4.4","webpack": "3.8.1","webpack-bundle-analyzer": "^3.0.3","webpack-dev-server": "2.9.4","webpack-hot-middleware": "^2.22.2","webpack-manifest-plugin": "1.3.2"
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）