получать удовольствие от работы с babel / laravel -микс - PullRequest
Новая
       20

получать удовольствие от работы с babel / laravel -микс

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

Я использую jest и testing-library/react для тестов моих ReactJS компонентов в Laravel приложении.

Мои тесты прерываются, потому что компонент для тестирования не распознается jest даже после импорта в тест. У меня есть следующие настройки в jest.config.js

module.exports = {
  testRegex: 'resources/js/tests/.*.test.js$',
  roots: ["<rootDir>/resources/js/"],
  moduleDirectories: ["resources/js/components", "resources/js/containers", "resources/js/views", "node_modules"]
}

И в файле package.json 

"test": "cross-env NODE_ENV=test jest",

Вот простой тест, который не проходит из-за ошибки 

import React from "react";
import { render, fireEvent, waitForElement } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import axiosMock from "axios";
// the component to test
import BlogEditor from "../../components/BlogEditor/BlogEditor";
jest.mock("axios");

test("Blog Editor recieves props and renders", () => {
    const { getByTestId } = render(
        <BlogEditor
            tags={[{ id: 1, name: "A tag"}]}
            suggestions={[{id: 2, name: "A Suggestion"}]}
        />
    );
});

Ошибка, которую я получаю, довольно крипти c

Шут встретил неожиданный токен 

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: /Users/anadi/Code/adminpanel/resources/js/tests/BlogEditor/BlogEditor.test.js: Unexpected token (16:8)

  14 | test("Blog Editor recived props and renders element", () => {
  15 |     const { getByTestId } = render(
> 16 |         <BlogEditor
     |         ^
  17 |             tags={[{ id: 1, name: "A tag"}]}
  18 |             suggestions={[{id: 2, name: "A Suggestion"}]}
  19 |         />

  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.parseExprListItem (node_modules/@babel/parser/src/parser/expression.js:2077:18)
  at Parser.parseCallExpressionArguments (node_modules/@babel/parser/src/parser/expression.js:817:14)

1 Ответ

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

Проблема была с моими конфигурациями babel и jest, перенесли конфигурацию jest на package.json (я понятия не имею, почему это на самом деле помогло), но она сделала 

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

и также обновила конфигурацию babel 

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ]
}
...