第一个玩笑测试失败-尝试导入反应

问题描述

我已经下载了这个https://github.com/jitsi/jitsi-meet项目，并插入了一个新按钮。 现在，我正在尝试学习如何创建一个笑话测试以查看按钮是否存在。

我劫持的特定文件是这样的： https://github.com/jitsi/jitsi-meet/blob/master/react/features/toolbox/components/web/Toolbox.js

我向_renderToolboxContent（）方法添加了一个新按钮。这是此新按钮的部分呈现的HTML：

<div aria-label="Toggle MyCustomSVGButton" class="toolbox-button">
    <div>
        <div class="toolbox-icon">
            <div class="jitsi-icon">
                <svg height="24" width="24" viewBox="0 0 792.199 792.199">
                </svg>
            </div>
        </div>
    </div>
</div>

到目前为止，根据其他示例，我将这个有趣的测试拼凑在一起：

import * as React from 'react';
import { shallow } from 'enzyme';
import Toolbar from './react/features/toolbox/components/web/Toolbox.js';

test('Check for MyCustomSVGButton',() => {

   it('MyCustomSVGButton rendered',() => {
    expect(wrapper.contains(MyCustomSVGButton).toEqual(true));
    });
});

但是当我运行它时，出现以下错误：

> jest

 FAIL  ./app.test.js   ● 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:
     • 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:

    /mnt/c/Users/jj/custom/jitsti-meet/app.test.js:1
    import * as React from 'react';
           ^

    SyntaxError: Unexpected token *

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1179:56)

Test Suites: 1 failed,1 total Tests:       0 total Snapshots:   0 total Time:        4.124 s Ran all test suites. npm ERR! Test failed.  See above for more details. jj@lab:/mnt/c/Users/jj/custom/jitsti-meet$

这是package.json的一部分：

 "devDependencies": {
    "@babel/core": "7.5.5","@babel/plugin-proposal-class-properties": "7.1.0","@babel/plugin-proposal-export-default-from": "7.0.0","@babel/plugin-proposal-export-namespace-from": "7.0.0","@babel/plugin-proposal-nullish-coalescing-operator": "7.4.4","@babel/plugin-proposal-optional-chaining": "7.2.0","@babel/plugin-transform-flow-strip-types": "7.0.0","@babel/preset-env": "7.1.0","@babel/preset-flow": "7.0.0","@babel/preset-react": "7.0.0","@babel/runtime": "7.5.5","axios": "^0.19.2","babel-eslint": "10.0.1","babel-jest": "^26.3.0","babel-loader": "8.0.4","circular-dependency-plugin": "5.2.0","clean-css-cli": "4.3.0","css-loader": "3.6.0","enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.3","eslint": "5.6.1","eslint-config-jitsi": "github:jitsi/eslint-config-jitsi#1.0.3","eslint-plugin-flowtype": "2.50.3","eslint-plugin-import": "2.20.2","eslint-plugin-jsdoc": "3.8.0","eslint-plugin-react": "7.11.1","eslint-plugin-react-native": "3.3.0","expose-loader": "0.7.5","flow-bin": "0.104.0","imports-loader": "0.7.1","jest": "^26.3.0","jetifier": "1.6.4","metro-react-native-babel-preset": "0.56.0","node-sass": "4.14.1","react-test-renderer": "^16.13.1","string-replace-loader": "2.1.1","style-loader": "0.19.0","unorm": "1.6.0","webpack": "4.43.0","webpack-bundle-analyzer": "3.4.1","webpack-cli": "3.3.11","webpack-dev-server": "3.11.0"
  },"scripts": {
    "test": "jest","lint": "eslint . && flow","postinstall": "jetify","validate": "npm ls"
  },

我尝试过的事情

由于此应用程序使用babel，因此我也安装了babel-jest，但仍然失败。

我找到了以下文件： https://github.com/jitsi/jitsi-meet/blob/master/webpack.config.js#L52

我目前正在对此进行比较： https://jestjs.io/docs/en/webpack

但是我不能说我确切地知道我应该寻找什么。

解决方法

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

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

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