Jest: Jest tidak berfungsi dengan JSX yang mengimpor CSS

@svipben https://facebook.github.io/jest/docs/webpack.html#mocking -css-modules

@maximderbin Terima kasih!

@maximderbin Terima kasih! Ini menyelesaikan masalah saya dengan menambahkan moduleNameMapper

@svipben @maximderbin @simonxl di mana saya harus menambahkan moduleNameMapper ini?
Saya melihat di dokumen bahwa kami akan menambahkannya di packag.json tetapi yang mana?
terima kasih

@sarahmarciano moduleNameMapper adalah bagian dari konfigurasi Anda. Secara default, Anda dapat mengatur konfigurasi di package.json (yang menampilkan lelucon dalam dependensi) di bawah kunci "bercanda", seperti ini:

{
  "dependencies": {...}
  "jest": {
    "moduleNameMapper": {...}
  }
}

Saya memecahkan ini dengan menggunakan kunci moduleNameMapper dalam konfigurasi lelucon di file package.json

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

Setelah ini, Anda perlu membuat dua file seperti yang dijelaskan di bawah ini

• __mocks__/styleMock.js

module.exports = {};

• __mocks__/fileMock.js

module.exports = 'test-file-stub';

Jika Anda menggunakan Modul CSS maka lebih baik untuk mengolok-olok proxy untuk mengaktifkan pencarian className.
maka konfigurasi Anda akan berubah menjadi:

{
  "jest":{
     "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
  }
}

Tetapi Anda perlu menginstal paket identity-obj-proxy sebagai ketergantungan dev yaitu

yarn add identity-obj-proxy -D

Untuk informasi lebih lanjut. Anda dapat merujuk ke dokumen lelucon

Perhatikan bahwa pendekatan yang direkomendasikan di sini tidak akan berfungsi jika modul CSS Anda mengekspor nilai yang bergantung pada file JSX Anda. Sebagian besar panduan menganggap Anda hanya menggunakan modul CSS untuk mengekspor nama kelas. Saya berharap ada panduan untuk mengejek modul CSS dengan benar.

@matthew-dean apa maksudmu "dengan benar mengejek modul CSS"? Bisakah Anda menjelaskan kasus penggunaan Anda sedikit lebih banyak? Saya memiliki pengalaman hebat menggunakan identity-obj-proxy

:export {
  sizeMobile: $size-mobile / 1px;
  sizePhablet: $size-phablet / 1px;
  sizeSmallTablet: $size-small-tablet / 1px;
  sizeTablet: $size-tablet / 1px;
  sizeDesktop: $size-desktop / 1px;
  sizeLargeDesktop: $size-large-desktop / 1px;
}

import styles from './variables.scss'

const tileSize = parseFloat(styles.sizeTablet) / 3
//...
render() {
  return <Tile style={{width: tileSize}} />
}

Ini adalah contoh yang dibuat-buat, hanya menunjukkan bahwa Anda dapat berbagi konstanta (nilai) antara modul CSS dan JS, dan rendering bersyarat atau props dinamis dapat ditetapkan berdasarkan nilai.

Tetapi dengan identity-obj-proxy , nilai-nilai ini tidak dapat dilemparkan ke bilangan bulat, apalagi nilai aktual yang ada. Jadi, jika Anda memiliki kode JSX yang bergantung pada konstanta yang ditentukan dalam modul CSS Anda, maka Anda tidak dapat mengujinya tanpa mengejek modul CSS dengan benar (memiliki objek yang dikembalikan yang memiliki nilai sebagai bilangan bulat yang dapat diuji). identity-obj-proxy hanya mengasumsikan bahwa modul CSS Anda berisi objek dengan tidak lebih dari nama kelas CSS yang dicakup; itu tidak mendukung aspek lain dari modul CSS yang merupakan kemampuan untuk mengekspor nilai/konstanta yang pada gilirannya digunakan dalam operasi JS.

@SimenB

Kebetulan, saya berhasil mengolok-olok modul CSS seperti ini:

const styles = require('styles/variables.scss')

jest.mock('styles/variables.scss', () => {
  return {
    sizePhablet: 500,
    sizeSmallTablet: 768,
    sizeTablet: 1024,
    sizeDesktop: 1440,
    sizeLargeDesktop: 1920
  }
})

Semoga itu berguna bagi orang lain yang menggunakan semua fitur modul CSS dan, seperti saya, sama sekali tidak peduli dengan saran default "gunakan identity-obj-proxy ".

Saya memecahkan masalah ini dengan menggunakan 'jest-transform-css'.
Setelah menginstal, tambahkan di bawah ini di konfigurasi jest.

"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }

Sekarang file css akan ditranspilasikan seperti halnya file js.

@matthew-dean di mana Anda menulis tiruan modul CSS dan bagaimana Anda merujuknya ke lelucon?

Saya menggunakan paket eksternal dan mengimpor filenya sendiri ke satu file dengan menggunakan yang berikut ini:
<strong i="6">@import</strong> "progress-tracker/progress-tracker-variables.scss";

Setiap kali saya menjalankan Jest untuk memulai pengujian

kesalahan di atas muncul. Saya sudah menentukan mockup css di dalam package.json

Saya menantikan untuk mendapatkan bantuan tentang masalah itu. Ada trik, saran?

Sunting: Saya telah mencoba paket babel-jest dan identity-obj-proxy dan tidak ada yang berhasil. Masalahnya masih berlanjut.

Sunting 2: Saya juga telah mencoba konfigurasi di bawah ini sesuai dengan solusi yang saya temukan di web.

Saya menggunakan Babel 7 , babel-jest ^24.5.0 , Jest ^24.1.0 .

Setelah mengikuti saran di atas, saya masih mendapatkan kesalahan ini ketika saya mencoba import suatu fungsi atau objek ke dalam file uji Jest (mis Post.test.js ) ketika file target (mis Post.js ) mengimpor file CSS - misalnya ./postStyles.css .

Jest encountered an unexpected token

SyntaxError: Unexpected token .

Details:

    /Users/ben/Desktop/Work/code/bengrunfeld/src/front-end/components/Post/postStyles.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.post h1, .post h2, .post h3 {

      3 |
      4 | import { PostText } from './styles'
    > 5 | import './postStyles.css'

Sesuai artikel yang ditautkan di atas, ini ada di package.json saya :

"jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",

      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js"
    }
  },

dan di direktori root, saya memiliki __mocks__/styleMock.js yang memiliki kode berikut:

module.exports = {};

Terakhir, jest.config.js saya :

module.exports = {
  setupFiles: ['<rootDir>/src/test/setup.js']
}

Yang pada gilirannya mengonfigurasi Enzim:

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

Saya berjuang untuk menyelesaikan masalah yang hampir sama di mana file scss saya berisi pernyataan @import. Tes gagal memberi tahu SyntaxError: Token tidak valid atau tidak terduga. Adakah yang bisa membantu saya?

Saya mengikuti solusi yang diberikan di atas tetapi sepertinya tidak ada yang berhasil untuk saya

Saya dapat menyelesaikan ini dengan menambahkan @babel/polyfill sebagai ketergantungan dev

sama di sini @fthomas82

Saya memecahkan ini dengan menggunakan kunci moduleNameMapper dalam konfigurasi lelucon di file package.json

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

Setelah ini, Anda perlu membuat dua file seperti yang dijelaskan di bawah ini

• __mocks__/styleMock.js

module.exports = {};

• __mocks__/fileMock.js

module.exports = 'test-file-stub';

Jika Anda menggunakan Modul CSS maka lebih baik untuk mengolok-olok proxy untuk mengaktifkan pencarian className.
maka konfigurasi Anda akan berubah menjadi:

{
  "jest":{
     "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
  }
}

Tetapi Anda perlu menginstal paket identity-obj-proxy sebagai ketergantungan dev yaitu

yarn add identity-obj-proxy -D

Untuk informasi lebih lanjut. Anda dapat merujuk ke dokumen lelucon

Itu berhasil untuk saya. Terima kasih!!!

Saya memecahkan masalah ini dengan menggunakan 'jest-transform-css'.
Setelah menginstal, tambahkan di bawah ini di konfigurasi jest.

"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }

Sekarang file css akan ditranspilasikan seperti halnya file js.

Terima kasih gan @krajasekhar
Ini bekerja untuk saya 👍

Saya menambahkan konfigurasi yang disarankan ke packages.json , tanpa hasil, kemudian saya menyadari bahwa saya memiliki jest.config.js di direktori root proyek saya, Jest menggunakan file konfigurasi itu di atas packages.json .

Untuk referensi di sini adalah file jest.config.js saya:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

Saya harus mengimpor css mentah dalam kode saya

import "./cloud.css?raw"

Saya juga memodifikasi konfigurasi lelucon
"jest":{ "moduleNameMapper": { "\\.(css|less|scss|sass|css?raw)$": "identity-obj-proxy" },

tetap saja, saya mendapatkan kesalahan pengujian pada jalur impor. Adakah yang tahu bagaimana cara mengejek impor mentah?

Solusi dari @import Token tak terduga= :)

Instal paket:
npm i --save-dev identity-obj-proxy

Tambahkan jest.config.js

module.exports = {
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

Jika seseorang tiba di sini:
Modul ini adalah yang terbaru yang pernah saya lihat: https://www.npmjs.com/package/jest-css-modules-transform

transform: { '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest', ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform" }, transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$', ], moduleNameMapper: { '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy' },

Saya menambahkan konfigurasi yang disarankan ke packages.json , tanpa hasil, kemudian saya menyadari bahwa saya memiliki jest.config.js di direktori root proyek saya, Jest menggunakan file konfigurasi itu di atas packages.json .

Untuk referensi di sini adalah file jest.config.js saya:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

Terima kasih kepada semua orang yang memberikan solusi dan khusus untuk Anda @Shadoow! Itu semacam logika tetapi saya melewatkannya ... file konfigurasi akan digunakan di atas pengaturan di package.json

Singkatnya, untuk pendatang baru, apa yang berhasil bagi saya adalah penyatuan berbagai solusi yang disajikan oleh tim impian komunitas kami:

1) buat file jest.config.json

touch jest.config.json open jest.config.json

2) Instal jest-transform-css:

yarn add jest-transform-css -D

3) Ini adalah bagaimana file konfigurasi jest Anda akan terlihat seperti:

module.exports = {
  preset: 'ts-jest/presets/js-with-babel',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': './jest.mock.js',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/assets/'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(css|less|scss|sass)$': 'jest-transform-css',
  },
};

4) Perbarui package.json Anda (pertama, transfer semua konfigurasi JEST Anda, jika Anda memiliki beberapa di sana, ke file konfigurasi lelucon baru), maka keajaiban terjadi di sini:

"test": "jest --config ./jest.config.js"

Tks Semuanya!