Skip to content

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

@Brunni132

Description

@Brunni132

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 :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions