getting jest to work with babel / laravel-mix - reactjs

Question

I'm using jest and testing-library/react for tests of my ReactJS components in a Laravel app.
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"]
}
And in the package.json file
"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"}]}
/>
);
});
The error I get is rather cryptic
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)

Answer 1

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"
}
and updated the babel configuration too
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-syntax-dynamic-import"
]
}