Не удается найти имя класса с babel-plugin-реагировать-css-модули - PullRequest
Новая
       58

Не удается найти имя класса с babel-plugin-реагировать-css-модули

0 голосов
/ 12 февраля 2019

У меня другая проблема, чем та, что здесь. babel-plugin-реагировать-css-modules не соответствует стилям с styleName

Я пытаюсь найти класс приложения в моем файле App.jsx, чтобы подтвердить, что я установил babel-plugin-реагировать-css-модули с ферментом.К сожалению, у меня явно не получилось так успешно, хотя я, кажется, следую здесь предполагаемому решению: https://github.com/gajus/babel-plugin-react-css-modules/issues/168 (хотя я использую Jest)

Буду очень признателен за любую помощь.

App.jsx 

import React from 'react';
import { hot } from 'react-hot-loader/root';
import './App.css';

const App = () => (
  <div styleName="App">
    <h1>Hello World!</h1>
  </div>
);
export default hot(App);

App.test.js 

import {mount} from 'enzyme';
import React from 'react';
import App from './App';

it('has an App component which returns a div with the class named App', () => {
  const wrapper = mount(<App />);
  expect(wrapper.find('.app')).toHaveLength(1);
})

сообщение об ошибке теста 

Expected length: 1
Received length: 0
Received object: {}

Я подтвердил, чтопроблема связана с транспиляцией, потому что тест проходит, когда я ищу класс App__App ___ 1o-Fp, который выглядит так, как на localhost.

.babelrc 

 {
  "env": {
    "test": {
      "presets": ["@babel/env", "@babel/preset-react"],
      "plugins": [
      [
        "react-css-modules",
        {
          "generateScopedName": "[local]"
        }]
      ]
    }
  },
  "presets": ["@babel/env", "@babel/preset-react"],
  "plugins": ["react-hot-loader/babel", [
    "react-css-modules",
    {
      "generateScopedName": "[name]__[local]___[hash:base64:5]"
      }
    ]
  ]
}

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.jsx",
  mode: "development",
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "eslint-loader",
        options: {
          fix: true
        }

      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: ["babel-loader", "react-hot-loader/webpack"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", {loader: "css-loader", options: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }}]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }, 
    extensions: ["*", ".js", ".jsx"]
    },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

package.json 

{
  "name": "shopping-page",
  "version": "1.0.0",
  "description": "Hi!",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@gitlab.com/mgoldwater-nisum-com/shopping-page.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://gitlab.com/mgoldwater-nisum-com/shopping-page/issues"
  },
  "homepage": "https://gitlab.com/mgoldwater-nisum-com/shopping-page#README",
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@hot-loader/react-dom": "^16.8.1",
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-react-css-modules": "^5.0.0",
    "css-loader": "^2.1.0",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "eslint-loader": "^2.1.2",
    "file-loader": "^3.0.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.1.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-hot-loader": "^4.6.5",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  },
  "devDependencies": {
    "eslint": "^5.13.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "moduleNameMapper": {
      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
    }
  }
}

1 Ответ

0 голосов
/ 12 февраля 2019

Используйте заглавную букву A вместо строчной буквы a в app.test.js, идиот!

...