Тест Jest Enzyme выдает неожиданную ошибку токена - PullRequest
Новая
       54

Тест Jest Enzyme выдает неожиданную ошибку токена

0 голосов
/ 08 мая 2019

Когда я запускаю тест, он выдает "неожиданную ошибку токена в коде: 

const wrapper = shallow(<WelcomeMessage/>");

Ошибка выдается в" (<". Я посмотрел несколько ответов от stackoverflow и githubно почему-то я все еще не могу заставить его работать. </p>

Я написал шутливые тесты. Это мой первый раз, когда я пишу тестовый пример с использованием фермента и реакции. Так что я не знаком с настройкой. Я установил: babelJest, Reaction-Dom, Babel-Plugin-Transform-Export-Extension, энзим-адаптер-реакция-16, рендеринг-тест-рендерер, @ babel / preset-env и @ babel / core

package.json: 

{
  "private": true,
  "version": "0.0.0",
  "name": "example-jquery",
  "devDependencies": {
    "@babel/core": "*",
    "@babel/preset-env": "^7.4.4",
    "babel-jest": "^24.8.0",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "jest": "^24.8.0",
    "jest-dom": "^3.1.4",
    "jest-useragent-mock": "0.0.3"
  },
  "dependencies": {
    "jest-puppeteer": "^4.1.1",
    "jquery": "^3.4.1",
    "jsdom": "^15.0.0",
    "puppeteer": "^1.15.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-test-renderer": "^16.8.6"
  },
  "scripts": {
    "test": "jest --verbose"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }
}

jest.config.js: 

module.exports = {
  preset: 'jest-puppeteer',
  "bail": 0,
  setupFiles: ['<rootDir>/enzyme.config.js'],
  moduleFileExtensions: ['js', 'json', 'jsx'],
  transformIgnorePatterns: ['<rootDir>/node_modules/']
}

фермент.config.js: 

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

.babelrc: 

{
  "presets": ["@babel/preset-env"],
  "plugins": ["transform-export-extensions"],
  "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]
}

WelcomeMessage.test.js: 

import React from 'react';
import { shallow } from 'enzyme';

// Components
import WelcomeMessage from './WelcomeMessage';

function setup() {
  const props = {
    imgPath: 'some/image/path/to/a/mock/image',
  };
  const wrapper = shallow(<WelcomeMessage />);
  return { wrapper, props };
}

describe('WelcomeMessage Test Suite', () => {
  it('Should have an image', () => {
    const { wrapper } = setup();
    expect(wrapper.find('img').exists()).toBe(true);
  });
});

1 Ответ

1 голос
/ 09 мая 2019

Эта строка: 

<WelcomeMessage />

- это JSX, который "просто предоставляет синтаксический сахар для функции React.createElement" .

Поскольку JSX на самом деле не действителенКод JavaScript должен быть скомпилирован в React.createElement вызовов.

Это делается с помощью Babel плагина @babel/plugin-transform-react-jsx, который входит в состав @babel/preset-react.

Добавьте @babel/preset-react в конфигурацию Babel, и это должно решить проблему.

...