I have been trying to get my tests to run with jest, after I switched from CRA to nextjs. I’ve been having a hell of a time.
I get this error:
import * as Curry from "rescript/lib/es6/curry.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
6 |
7 | // @ts-ignore: Implicit any on import
> 8 | import * as CategorySelectButtonBS__Es6Import from './CategorySelectButton.bs';
| ^
9 | const CategorySelectButtonBS: any = CategorySelectButtonBS__Es6Import;
10 |
11 | // tslint:disable-next-line:interface-over-type-literal
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/rescript/components/CategorySelectButton.gen.tsx:8:1)
This makes me think I needed to make sure this was in my transformIgnorePatterns for jest. But in reality, it’s already there. Here’s my jest.config.js:
module.exports = {
testEnvironment: "jsdom",
setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
setupFiles: ["dotenv/config"],
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock",
"\\.(css|less)$": "<rootDir>/jest/__mocks__/styleMock",
},
transformIgnorePatterns: [
"/node_modules/(?!(@apollo|cropperjs|react|rescript)/)",
],
preset: "ts-jest",
transform: {
"^.+\\.(ts|tsx)?$": "ts-jest",
"^.+\\.(ts|jsx)$": "babel-jest",
},
globals: {
// This is necessary because next.js forces { "jsx": "preserve" }, but ts-jest appears to require { "jsx": "react" }
'ts-jest': {
tsconfig: {
jsx: 'react',
},
},
}
};
My bsconfig.json:
{
"name": "__",
"namespace": false,
"reason": {
"react-jsx": 3
},
"bs-dependencies": [
"@reasonml-community/graphql-ppx",
"@rescript/react",
"rescript-apollo-client",
"rescript-material-ui",
"rescript-webapi"
],
"ppx-flags": [
"@reasonml-community/graphql-ppx/ppx"
],
"graphql": {
"objects": true,
"apolloMode": true,
"extendMutation": "ApolloClient.GraphQL_PPX.ExtendMutation",
"extendQuery": "ApolloClient.GraphQL_PPX.ExtendQuery",
"extendSubscription": "ApolloClient.GraphQL_PPX.ExtendSubscription",
"templateTagReturnType": "ApolloClient.GraphQL_PPX.templateTagReturnType",
"templateTagImport": "gql",
"templateTagLocation": "@apollo/client"
},
"gentypeconfig": {
"language": "typescript",
"module": "es6",
"importPath": "relative",
"shims": {
"Js": "Js"
},
"debug": {
"all": false
},
"exportInterfaces": false
},
"sources": [
{
"dir": "src",
"subdirs": true
}
],
"package-specs": {
"module": "es6",
"in-source": true
},
"suffix": ".bs.js",
"warnings": {
"number": "-3",
"error": "+101+8"
}
}
And not sure if it matters, but here is my tsconfig.json
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"noImplicitAny": true,
"typeRoots": ["./node_modules/@types", "./types/"],
"noFallthroughCasesInSwitch": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src"],
"exclude": ["node_modules", "**/*.spec.ts"],
"plugins": [
{
"name": "typescript-tslint-plugin"
}
]
}
This is a .tsx test that is rendering a component accessing a .gen.tsx file that is accessing a .bs.js file where the transform ignore is not really working. Anyone have any ideas?
package.json is now set to