Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

moduleNameMapper for CSS in quasar-app-extension-testing-unit-jest/jest-preset.mjs is too broad #331

Open
Brunni132 opened this issue Mar 22, 2023 · 0 comments

Comments

@Brunni132
Copy link

Software version

OS: Windows and MacOS
Node: 18.15.0
NPM: 9.5.0 (using yarn 1.22.19)
Any other software related to your bug: -

What did you get as the error?

$ yarn test:unit
yarn run v1.22.19
$ jest --updateSnapshot
 FAIL  test/jest/__tests__/canShowError.spec.ts
  ● Test suite failed to run

    Configuration error:

    Could not locate module postcss mapped as:
    @quasar/quasar-app-extension-testing-unit-jest/stub.css.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/.*css$/": "@quasar/quasar-app-extension-testing-unit-jest/stub.css"
      },
      "resolver": undefined
    }

      1 | import _ from 'lodash'
      2 | import { QDialogOptions } from 'quasar'
    > 3 | import sanitizeHtml from 'sanitize-html'
        | ^
      4 |
      5 | export function sanitize(str: string) {
      6 |   return sanitizeHtml(str)

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/resolver.js:759:17)
      at Object.<anonymous> (node_modules/sanitize-html/index.js:6:33)
      at Object.<anonymous> (src/common/ui-util.ts:3:1)
      at Object.<anonymous> (test/jest/__tests__/canShowError.spec.ts:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.325 s, estimated 1 s

What were you expecting?

$ yarn test:unit
yarn run v1.22.19
$ jest --updateSnapshot
 PASS  test/jest/__tests__/canShowError.spec.ts
  can show error
    ✓ sanitizes well (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.329 s

What steps did you take, to get the error?

Unzip the attached project. Run npm install / yarn. Then run yarn test:unit.

quasar-unit-test-issues.zip

You'll see an error. There are two things involved in here:

  1. The fact that importing the module postcss internally in sanitizeHtml makes the module mapper to treat it as CSS. It's because the rule in quasar-app-extension-testing-unit-jest/jest-preset.mjs is too broad: '.*css$': '@quasar/quasar-app-extension-testing-unit-jest/stub.css',. Which will take anything finishing by CSS. The dot should be escaped, like done for vue files '.*\\.vue$'.
  2. Even if I set myself up to override the rule, like I do in jest.config.mjs at line 28, it doesn't solve the problem. I need to do a manual combination of the two files to remove the buggy rule and replace with my own (follow the TODO in the file to make it work).

It would be great if those two issues, making extending from a preset difficult (if it's not a problem inside Jest itself) and being unable to import modules ending by css, would be fixed. Thank you :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant