search

aurelia / v1

The Aurelia 1 scaffolding repo used by our tools to setup new projects.
MIT License
9 stars 3 forks source link

fix: Jest mocking problem with css and other files format when using Webpack as a bundler #29

Closed HamedFathi closed 3 years ago

HamedFathi commented 3 years ago

Based on Jest doc for Webpack and also my recent experience

image

we should move/copy

"^.+\\.(css|less|sass|scss|styl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",

under moduleNameMapper

    "jest": {
        "moduleNameMapper": {
            "^aurelia-binding$": "<rootDir>/node_modules/aurelia-binding",
            "^.+\\.(css|less|sass|scss|styl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",
            "^.+\\.ts$": "ts-jest"
        },

image

Two points:

  1. I am not sure we should do the same for "^.+\\.ts$": "ts-jest" or not!
  2. Should we remove it/them from the transform section or not?

cc @3cp

3cp commented 3 years ago

As far as I know, the "transform" section is different from "moduleNameMapper".

In transform, jest calls the transformer to process the content of the requested file. In moduleNameMapper, jest use the target file content as if it's the content of the requested file.

So when you use "...": "jest-transform-stub", it uses the main file of the npm module jest-transform-stub as the content of any css/less/scss file. You can almost replace "...": "jest-transform-stub" with any "...": "any-npm-module" as long as importing any-npm-module has no serious side effect at runtime when jest runs test.

3cp commented 3 years ago

Please share a minimal repo where you have problem with webpack+jest.

HamedFathi commented 3 years ago

Please share a minimal repo where you have problem with webpack+jest.

So weird, I cannot reproduce it again! but I have added that config into our project right now (I cannot share it). I made a local project and it is OK!