. Advertisement .
..3..
. Advertisement .
..4..
It is very common for the program to have an error that causes the programmer to stop the project. There are many types of errors in programming, some are easy to detect, but there are also errors that require in-depth knowledge to recognize. So, to be proficient in programming is not easy. Today, we continue to bring you a situation that programmers can get into, which is “SyntaxError: Unexpected token“. Let’s follow the article to find the answer.
What is “SyntaxError: Unexpected token”?
Below is the program that was showing the error when the user was running the project through apps in React: jest, enzyme.
ProjectsMyProject__tests__app.test.js:17
const wrapper = (0, _enzyme.shallow)(<_App.App />);
^
SyntaxError: Unexpected token '<'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.523 s
Ran all test suites.
error Command failed with exit code 1.
The program is created in the app.test.js file as follows:
import React from "react";
import { expect } from "chai";
import { shallow } from "enzyme";
import { App } from "../src/App";
import Header from "../src/components/header/header.component";
describe("<App />", () => {
it("renders one Header component", () => {
const wrapper = shallow(<App />);
expect(wrapper.find(Header)).to.have.lengthOf(1);
});
});
and babel.config.js:
module.exports = {
presets: [["@babel/preset-react", { targets: { node: "current" } }]],
plugins: ["@babel/plugin-syntax-jsx", "transform-export-extensions"],
only: ["./**/*.jsx", "./**/*.js", "node_modules/jest-runtime"],
};
After adjusting and adding babel-jest to the program, but the error still occurs, it shows the following:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from "react";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.344 s
Ran all test suites.
error Command failed with exit code 1.
Why Does This Error Happen?
The SyntaxError: Unexpected token problem in JavaScript might have a variety of origins. Usually, a typo or bad code is to blame for the problem. In other instances, the misconfiguration or incompatibility with the browser or development environment may also be to blame for the issue. A missing semicolon is a frequent reason for the SyntaxError: Unexpected token problem. Semicolons are used in JavaScript to signify the end of a sentence. A semicolon missing from a statement may cause a SyntaxError: Unexpected token problem. Incorrect coding is another major source of this problem. Typos, missing brackets or parentheses, wrong variable names, and other issues might result in improper code.
Solutions For “SyntaxError: Unexpected token” Problem
Solution 1: Read each step carefully and follow our instructions
Here, please read each step carefully and follow our instructions to solve the problem “SyntaxError: Unexpected token”.
Firstly, maybe you have installed some dependencies or jest in your package.json:
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "7.12.11",
"@babel/preset-react": "7.12.10",
"babel-jest": "26.6.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"chai": "^4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"enzyme-to-json": "^3.6.1",
"jest": "26.6.3",
"node-sass": "4.14.1",
"react-test-renderer": "17.0.1",
"redux-mock-store": "^1.5.4"
},
...other stuff---
"jest": {
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
}
}
You can check by the following:
// <rootdir>/__tests__/app.test.js
import React from "react";
import { assert } from "chai";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import configureMockStore from "redux-mock-store";
import { Provider } from "react-redux";
import App from "../src/App"; // Component to Test
configure({ adapter: new Adapter() });
const mockStore = configureMockStore();
const store = mockStore({});
describe("Test Component", () => {
it("render correctly App component", () => {
const AppComponent = shallow(
<Provider store={store}>
<App />
</Provider>
).exists();
assert(AppComponent === true);
});
});
To make sure no error occurs in jsx when entering css/scss or file, adding styleMock, filemock like this:
// <rootdir>/__mocks__/styleMock.js
module.exports = {};
// <rootdir>/__mocks__/fileMock.js
module.exports = "test-file-stub";
// <rootdir>/babel.config.js
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime",
],
};
Now you can try to run the program again.
Solution 2: Look at this successfully response
The SyntaxError: Unexpected token problem indicates that JSON was not sent in the document body of the API endpoint, maybe as a result of a 404. In this instance, it wants to see a (start of JSON), but instead discovers a (start of a heading element).
Look at this successfully response:
<html>
<head></head>
<body>
{"foo": "bar", "baz": "qux"}
</body>
</html>
Not-found response:
<html>
<head></head>
<body>
<h1>Not Found</h1>
<p>The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.</p>
</body>
</html>
To see the results, let’s try going to the data endpoint’s URL in your browser.
Conclusion
Hopefully after this article you have gained a new knowledge to solve the problem when encountering “SyntaxError: Unexpected token“. If there are any difficulties, please contact us immediately for answers.
Read more
Leave a comment