Can't find class name with babel-plugin-react-css-modules - reactjs

Question

I'm having a different problem from the one here. babel-plugin-react-css-modules is not matching styles with styleName
I'm trying to search for the app class in my App.jsx file to confirm I've setup babel-plugin-react-css-modules with Enzyme. Unfortunately, I clearly haven't done so successfully, even though i seem to be following the supposed solution here: https://github.com/gajus/babel-plugin-react-css-modules/issues/168 (although I'm using Jest)
I'd really appreciate any help.
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);
})
test failure message
Expected length: 1
Received length: 0
Received object: {}
I've confirmed that the issue is due to transpilation because the test passes when I search for the class App__App___1o-Fp which is what it appears as on 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"
}
}
}