Open Mythra opened 5 months ago
just-boris
commented
4 months ago Everything looks as expected, except moduleNameMapper config.
It seems like you are using a custom themed package. Jest preset is only for the original components. For your themed package you need to configure this on your end
Mythra
commented
4 months ago Hi,
As I tried to mention in the original source code for jest.config.js, I'm not actually testing the mapped modules right now. To confirm this isn't an issue, I've removed that block entirely. So now I've got:
const merge = require("merge");
const tsPreset = require("ts-jest/jest-preset");
const cloudscapePreset = require("@cloudscape-design/jest-preset");
module.exports = merge.recursive(tsPreset, cloudscapePreset, {
globals: {
GIT_SHORTHASH: "0000000",
GIT_HASH: "0000000000000000000000000000000000000000",
},
moduleNameMapper: {
"^.+\\.(css|scss|sass)$": "<rootDir>/webpack/css-stub.js",
},
roots: ["<rootDir>/source"],
testMatch: ["**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)"],
});And I've still got the same error. If it's helpful, this seems to be the final module exports:
> node
Welcome to Node.js v20.9.0.
Type ".help" for more information.
> const data = require("./jest.config.js");
undefined
> data
{
transform: {
'^.+\\.tsx?$': [ 'ts-jest', {} ],
'node_modules/@cloudscape-design/.+\\.js$': 'D:\\github\\<project>\\packages\\browser-extension\\node_modules\\@cloudscape-design\\jest-preset\\js-transformer.js',
'node_modules/@cloudscape-design/.+\\.css': 'D:\\github\\<project>\\packages\\browser-extension\\node_modules\\@cloudscape-design\\jest-preset\\css-transformer.js',
'node_modules/(d3-.*|internmap)/.+\\.js$': 'D:\\github\\<project>\\packages\\browser-extension\\node_modules\\@cloudscape-design\\jest-preset\\js-transformer.js'
},
transformIgnorePatterns: [ '/node_modules/(?!(d3-.*|internmap|@cloudscape-design/)).+\\.js$' ],
globals: {
GIT_SHORTHASH: '0000000',
GIT_HASH: '0000000000000000000000000000000000000000'
},
moduleNameMapper: { '^.+\\.(css|scss|sass)$': '<rootDir>/webpack/css-stub.js' },
roots: [ '<rootDir>/source' ],
testMatch: [
'**/__tests__/**/*.+(ts|tsx|js)',
'**/?(*.)+(spec|test).+(ts|tsx|js)'
]
}And FWIW css-stub.js is just:
module.exports = {};
tannerbyers
commented
4 months ago Hey @Mythra, the cause of this issue is roots being set to <rootDir>/source but your npm modules are not in that directory so they're not being found & transformed to cjs.
I tested myself (setting roots to a sub folder and node modules in another sub folder) and it fails for same reason as yours.
Could you add a roots route for node modules or removing roots from the config and updating the routes? Something like:
roots: ["<rootDir>/source", "<rootDir>/node_modules"],Hi @tannerbyers ,
Thanks for that pointer! That certainly makes sense. I've gone ahead and remove that block because i don't think we ever really required it being set there -- probably got set without thinking. Good news is! Running this all in WSL (linux on windows), ran into a different error I was able to fix quickly, and tests now pass (specifically I had to switch the test environment to jsdom, and install jsdom as a development dependency).
Unfortunately, in WSL tests are relatively slow, and unfortunately the error is not fixed on Windows :( I did also try adding in explicitly <rootDir>/source, and <rootDir>/node_modules just incase but the error remained as well. I'm kind of unblocked here being able to run in WSL but it's certainly not ideal. The current jest configuration stands at:
const merge = require("merge");
const tsPreset = require("ts-jest/jest-preset");
const cloudscapePreset = require("@cloudscape-design/jest-preset");
module.exports = merge.recursive(tsPreset, cloudscapePreset, {
globals: {
GIT_SHORTHASH: "0000000",
GIT_HASH: "0000000000000000000000000000000000000000",
},
moduleNameMapper: {
"^.+\\.(css|scss|sass)$": "<rootDir>/webpack/css-stub.js",
},
testEnvironment: "jsdom",
testMatch: ["**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)"],
});Which translates to the following:
{
transform: {
'^.+\\.tsx?$': [ 'ts-jest', {} ],
'node_modules/@cloudscape-design/.+\\.js$': 'D:\\github\\<project name>\\packages\\browser-extension\\node_modules\\@cloudscape-design\\jest-preset\\js-transformer.js',
'node_modules/@cloudscape-design/.+\\.css': 'D:\\github\\<project name>\\packages\\browser-extension\\node_modules\\@cloudscape-design\\jest-preset\\css-transformer.js',
'node_modules/(d3-.*|internmap)/.+\\.js$': 'D:\\github\\<project name>\\packages\\browser-extension\\node_modules\\@cloudscape-design\\jest-preset\\js-transformer.js'
},
transformIgnorePatterns: [ '/node_modules/(?!(d3-.*|internmap|@cloudscape-design/)).+\\.js$' ],
globals: {
GIT_SHORTHASH: '0000000',
GIT_HASH: '0000000000000000000000000000000000000000'
},
moduleNameMapper: { '^.+\\.(css|scss|sass)$': '<rootDir>/webpack/css-stub.js' },
testEnvironment: 'jsdom',
testMatch: [
'**/__tests__/**/*.+(ts|tsx|js)',
'**/?(*.)+(spec|test).+(ts|tsx|js)'
]
}Closing as no actions required on our end. Feel free to reopen if you find anything needed from the preset.
Mythra
commented
4 months ago Hey @just-boris ,
To be clear I think there's still an open item here, where the preset isn't working out of the box on Windows for me? It's only working in Linux based environments, is Windows not supported? Was there something I missed I needed to do for Windows specifically?
Mythra
commented
4 months ago For what it’s worth I don’t seem to have permission to re-open the issue either, not sure if you expect folks to be able too, but at least I can’t right now.
just-boris
commented
4 months ago I can convert this to a feature request to support Windows environment in the preset, but it is a feature request only, not a bug, because it was not intended to work in the first place
Mythra
commented
4 months ago Hey @just-boris , That's really good to know that Windows development was not intended to be supported. I'll admit I said that almost a bit rhetorically not expecting that a major development platform wouldn't be supported without any mention of it in any Cloudscape docs. I realize this is a question a bit larger than just the jest preset, but I don't know quite where else to ask it... are there other parts of cloudscape that don't support windows explicitly? Can we document we don't support one of the major 3 OS's that folks may attempt to use these libraries with?
just-boris
commented
4 months ago This is briefly mentioned in the contribution instructions how to build our own package: https://github.com/cloudscape-design/components/blob/b8e8e21de3ee2e21ff62896df4af4adb7e3341d8/CONTRIBUTING.md?plain=1#L61
But the same applies also to our dev tooling, including this preset. Contributions are welcome, but our team has no plans doing any changes on that platform.
Package version
2.0.28
Jest version
29.7.0
node-versions
20.9.0
npm-versions
10.2.3
Description
Hi đź‘‹ This is my first frontend project in quite awhile, I was able to get the UI & styling working in the way I wanted. However, I'm now running into an error upon trying to actually write tests for these react components. Specifically jest gets an unexpected token even though I have setup the project according to the documentation as far as I can tell.
The exact error I'm getting is:
Source code
Although I can't share links directly to the code I can share the following snippets, please let me know if you need anymore:
pacakge.json
```json { "name": "jest.config.js
```js const merge = require("merge"); const tsPreset = require("ts-jest/jest-preset"); const cloudscapePreset = require("@cloudscape-design/jest-preset"); module.exports = merge.recursive(tsPreset, cloudscapePreset, { globals: { GIT_SHORTHASH: "0000000", GIT_HASH: "0000000000000000000000000000000000000000", }, moduleNameMapper: { // As an explanation for this -- we have some "developer custom" components that are always rendered in night theme, these are generated as recommended in the render documentation -- but we're not using them for this test case, so we know it's not these that are an issue. // There may be a problem in the future but i'm not worried about that right now. "@account-bar\index.tsx
```typescript import React from "react"; import "./styles.css"; import { TextContent } from "@cloudscape-design/components"; export default () => { return ( ); }; ```account-bar\__tests__\account-bar.tsx
```typescript import React from "react"; import ReactTestRenderer from "react-test-renderer"; import AccountBar from "../"; it("can render the accountbar", () => { const renderer = ReactTestRenderer.create(Code of Conduct