Can i use Enzyme's .hasClass feature with react components importing css files?

问题

i am currently setting up a test environment and come across a problem, that all my calls to .hasClass return false.

Current Setup: My react components import scss files with an import statement. For example: import styles from "./text.scss";

To test the components i had to define the moduleNameMapper in the jest.config.js file like so:

moduleNameMapper: { "\\.(scss|less)$": "<rootDir>/__mocks__/styleMock.js" },

I think that the moduleNameMapper is kind of responsible for the problems, since it replaces via default all scss definitions with an empty module. (styleMock.js content is just module.exports = {};) But i need it to test my components, otherwise it would result in an error, when jest tries to load the scss imports.

When i now try this:

 it("is Title", () => {
    const wrapper = shallow(<Text textType={TextType.Title} />);
    expect(wrapper.find("div").hasClass("Title")).toEqual(true);
  });

It always returns false.

Is there any solultion on how to test the scss classes (with .hasClass from enzyme?), when you have scss import statements in your component?

回答1:

Found a solution finally that works!

For me i had to install the identity-obj-proxy via npm install --save-dev identity-obj-proxy and then add it to the jest config file like that:

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

After that my class name's are now in the snapshots correctly and no more undefined classnames! In addition to that i can now finally use the .hasClass feature of enzyme and check if new css class had been added to a div and so on. (Finally i can go into testing those conditional rendering parts!)

来源：https://stackoverflow.com/questions/59824958/can-i-use-enzymes-hasclass-feature-with-react-components-importing-css-files