Jest、Enzyme 和 Styled Component 不适用于警告：React.createElement

Question

我在一个具有相同名称和.css.jsx 的单独文件中创建了一个样式化的组件，例如Abc.jsx 有Abc.css.jsx，它被导入到Abc.jsx 中使用。但是当我尝试测试 Abc.jsx 时，我从 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.

似乎 React 无法找到我的 Abc.css.jsx 中写的样式。有谁知道这是什么原因以及如何解决这个问题？

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

我终于能得到和你一样的错误了！在这个codesandbox

所以问题在于样式化组件文件的命名。你将它们命名为[something].css.jsx。

在你的 jest.config 文件中尝试将它们映射为类或类似的东西，我认为这是因为导入，因为它以 '.css' 结尾

...
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
  },
...

您可以在这里做几件事。

1. 更改样式组件的命名约定。从[something].css.jsx 到[something].styled.jsx。
2. 删除moduleNameMapper
3. 从moduleNameMapper 中删除css

我个人最喜欢的是选项 1。