Question

我有一个这样的API文件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

    dataFunction(data)
    {
        return 10*data;
    }

    render() {
        return (
            <div className="App">
              <header className = "App-header">
                 <img src={logo} className="App-logo" alt="logo" />
                 <a
                   className="App-link"
                   href="https://reactjs.org"
                   target="_blank"
                   rel="noopener noreferrer"
                   >
                   React with With Jest - Function Testing
                   </a> 
              </header>
              </div>
        );
    }
}

我为此写了一个Jest文件

import React from 'react';
import App from './App';
import renderer from 'react-test-renderer';
//npm install react-test-renderer

test("Function Testing" ,()=>{
    let component = renderer.create(<App />).getInstance();
    let tree = component.dataFunction(10);
    expect(tree).toBe(99)
})

我的package.json文件看起来像这样

{
  "name": "validform",
  "version": "1.0.0",
  "description": "Validating a form and testing the validator functions",
  "main": "index.js",
  "scripts": {
    "test": "jest --verbose",
    "start": "webpack-dev-server --mode development --entry ./js/index.js --output-filename ./dist/bundled.js",
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hidjou/js-form-validation-tutorial.git"
  },
  "keywords": [
    "form validation",
    "testing",
    "webpack",
    "jest"
  ],
  "author": "Ahmed Hadjou",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hidjou/js-form-validation-tutorial/issues"
  },
  "homepage": "https://github.com/hidjou/js-form-validation-tutorial#readme",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "jest": "^24.9.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "node-fetch": "^2.6.0",
    "react-test-renderer": "^16.11.0"
  }
}

我正在通过下面的链接https://www.youtube.com/watch?v=3napfpAaIB4&list=PL8p2I9GklV45yyZiCeAm7TwYMC_YvG-uH&index=3

从事此项目。

如果我运行npm test命令，会出现以下错误

失败js / App.test.js ●测试套件无法运行

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:

SyntaxError: C:\Java\Projetos\Jest-Functional\classsed-jest\js\App.test.js: Unexpected token (7:36)

   5 |
   6 | test("Function Testing" ,()=>{
>  7 |     let component = renderer.create(<App />).getInstance();
     |                                     ^
   8 |     let tree = component.dataFunction(10);
   9 |     expect(tree).toBe(99)
  10 | })

  at Parser.raise (node_modules/@babel/parser/lib/index.js:3834:17)

因此，谁能尽快让我知道如何解决此问题，并尽快提供详细的解决方案。

开玩笑的测试用例显示意外的令牌错误

0 个答案: