Hi guys,
I have a custom plugin with some backend and frontend (admin) parts. We are using Strapi v4 with TypeScript. Finished unit tests for the backend part and started working on the frontend unit testing.
Our front end is built with Strapi design system components.
Created draft for the first test:
import { render } from "@testing-library/react";
import App from "../../../../admin/src/pages/App";
describe('App Index Component', () => {
it('renders correctly', () => {
const wrapper = render(<App />);
// TODO :Implement.
});
});
Getting next error:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { Flex as r } from "./Flex.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
13 | Button,
14 | } from '@strapi/design-system';
> 15 | import { Flex } from "@strapi/design-system/Flex";
| ^
16 | import Download from '@strapi/icons/Download';
17 | import Upload from '@strapi/icons/Upload';
18 | import Plus from '@strapi/icons/Plus';
Searched for different solutions.
Good points to start:
module.exports = {
preset: 'ts-jest/presets/js-with-babel'
};
It looks like the most related solution. However, it didn’t help.
jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-babel',
testEnvironment: "node",
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
rootDir: '.',
transform: {
"\\.[jt]sx?$": "ts-jest",
},
testPathIgnorePatterns: [
"node_modules/(?!(@strapi)/)",
'.tmp',
'.cache'
],
};
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"lib": ["es5", "es6", "dom", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"rootDir": "src",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"exclude": [
"node_modules",
"build",
"dist"
]
}