jest тесты не удаются при разборе простых тегов HTML в компоненте React - PullRequest
Новая
       25

jest тесты не удаются при разборе простых тегов HTML в компоненте React

0 голосов
/ 28 февраля 2020

Тестовые прогоны прерываются, в то время как стандартные парсонские теги HTML в шутку. Я использую библиотеки Babel, Webpack, Jest и React Testing.

Я установил следующие пакеты для включения jest 

"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-transform-modules-commonjs": "7.8.3",
"@babel/preset-react": "7.8.3",
"@babel/standalone": "7.8.6",
"@testing-library/dom": "6.12.2",
"@testing-library/jest-dom": "5.1.1",
"@testing-library/react": "9.4.0",
"babel-jest": "25.1.0",

И в package.json Я настроил jest следующим образом 

"jest": {
  "verbose": true,
  "collectCoverage": true,
  "roots": [
      "<rootDir>/resources/js/"
  ],
  "testRegex": "tests/.*.test.js$",
  "moduleDirectories": [
      "resources/js/",
      "node_modules"
  ],
  "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "__mocks__/fileMock.js",
      "\\.(css|scss)$": "__mocks__/styleMock.js"
  }
}

, и так как я его запускаю в Ларавеле; Я использую формат .bablerc для конфигурации babel, которая имеет следующую конфигурацию 

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]
}

Вот тест, который не проходит 

// import dependencies
import React from "react";
// import react-testing methods
import { render } from "@testing-library/react";
// add custom jest matchers from jest-dom
import "@testing-library/jest-dom/extend-expect";
// the component to test
import BlogEditor from "../../containers/BlogEditor/BlogEditor";

// https://jestjs.io/docs/en/mock-functions#mocking-modules
//jest.mock("axios");

test("Blog Editor renders", () => {
    const { getByTestId } = render(<BlogEditor />);
});

У компонента BlogEditor есть тег div, содержащий другие входные данные компоненты 

render() {
    return (
        <div className="p-col-12">
            <div className="p-lg-12">
                <InputText
                    defaultValue={this.props.defaultTitle}
                    id="title"
                    placeholder="Blog Title"
                    onChange={e =>
                        this.handleInput("title", e.target.value)
                    }
                    onBlur={this.props.enableSave}
                />
            </div>
            // further details omitted...

Тест не выполняется при синтаксическом анализе тега div всех вещей 

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:

SyntaxError: /Code/github/website/adminpanel/resources/js/containers/BlogEditor/BlogEditor.js: Unexpected token (46:12)

  44 |     render() {
  45 |         return (
> 46 |             <div className="p-col-12">
     |             ^
  47 |                 <div className="p-lg-12">
  48 |                     <InputText
  49 |                         defaultValue={this.props.defaultTitle}

  at Parser.raise (node_modules/@babel/parser/src/parser/location.js:41:63)
  at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:150:16)
  at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1123:20)
  at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:529:23)
  at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:509:21)
  at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:279:23)
  at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:234:23)
  at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:185:21)
  at Parser.parseParenAndDistinguishExpression (node_modules/@babel/parser/src/parser/expression.js:1300:16)
  at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1030:21)

Как настроить babel / jest, чтобы иметь возможность анализировать компоненты React без этих ошибок .

Ответы [ 2 ]

1 голос
/ 01 марта 2020

Пара изменений, дополненная конфигурация преобразования в jest config в package.json

"transform": {
    "^.+\\.js$": "babel-jest"
},

шут не набирает .babelrc, но читает из babel.config.js, поэтому удалил .babelrc и добавил js config 

module.exports = {
    comments: false,
    presets: [["@babel/preset-env"], ["@babel/preset-react"]],
    plugins: [
        "@babel/plugin-syntax-dynamic-import",
        ["@babel/plugin-proposal-class-properties", { loose: true }],
    ],
    ignore: ["node_modules"]
};
0 голосов
/ 28 февраля 2020

import {React} from "react"; вместо этого должно быть import React from "react";

...