开玩笑与babel/laravel-mix一起工作 [英] getting jest to work with babel / laravel-mix

问题描述

我正在使用 jest 和 testing-library/react 在 Laravel 应用程序中测试我的ReactJS组件.

I'm using jest and testing-library/react for tests of my ReactJS components in a Laravel app.

我的测试失败，因为即使将其导入测试后，玩笑也无法识别要测试的组件.我在 jest.config.js

My tests break because the component to to test isn't recognised by jest even after importing it into the test. I have the following settings in 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",

这是一个简单的测试，由于错误而失败

Here's a simple test that fails due to error

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"}]}
        />
    );
});

我得到的错误相当隐秘

Jest遇到意外令牌

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: /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)

推荐答案

问题出在我的babel和jest配置上，将jest配置移到了 package.json (我不知道为什么这实际上有帮助)，但确实有

The problem was with my babel and jest configurations, moved jest configuration to package.json (I have no clue why this actually helped) but it did

"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配置

and updated the babel configuration too

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

这篇关于开玩笑与babel/laravel-mix一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！