Jest, Enzyme and Styled Component not working with Warning: React.createElement - reactjs

Question

I have created a styled components in a sperate file with the same name and .css.jsx for example Abc.jsx have Abc.css.jsx and it's imported to the Abc.jsx to use. But when I try to test Abc.jsx I get the below error from the Enzyme mount,
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Seems like React can't locate the styles written in my Abc.css.jsx. Does anyone know the reason for this and how to fix this?
Abc.jsx
import * as Styled from './Abc.css';
function Abc() {
return (<Styled.Title>ABC</ Styled.Title>);
}
export default Abc
Abc.css.jsx
import styled from 'styled-components';
export const Title = styled.div`
`;
Abc.test.js
import Abc from '../../../components/Abc';
import { mount } from 'enzyme';
describe("My Abc tests", () => {
let wrapper;
beforeAll(() => {
wrapper = mount(<Abc />);
})
test("check api call", async () => {
})
});
jest.config
module.exports = {
testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
moduleNameMapper: {
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
transform: {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
}
};

Answer 1

I was finally able to get the same error as you! in this codesandbox
So the issue is in the naming of styled-component files. You name them [something].css.jsx.
And in you jest.config file tries to map them as classes or something like that, I assume it is because of the import as it ends with '.css'
...
moduleNameMapper: {
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
...
There are a couple of things you can do here.
Change naming convention for styled-components. From[something].css.jsx to [something].styled.jsx.
Remove moduleNameMapper
Remove css from moduleNameMapper
My personal favorite is option 1.