Question

我遇到了与这里不同的问题。 babel-plugin-react-css-modules is not matching styles with styleName

我正在尝试在App.jsx文件中搜索应用程序类，以确认我已使用Enzyme设置了babel-plugin-react-css-modules。不幸的是，即使我似乎遵循此处假定的解决方案，我显然也没有成功完成这项工作：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 ___ 1o-Fp时，该测试通过了，这是在本地主机上显示的。

.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"
    }
  }
}

Answer 1

在白痴的app.test.js中使用大写字母A代替小写字母a！

使用babel-plugin-react-css-modules无法找到类名称

1 个答案: