Test react components with jest and enzyme and css modules - reactjs

Question

I have a project which was created using create react app.
Lets say I have a simple component like this -
import React from 'react';
import React, { useState } from "react";
function Example() {
const [data, setData] = useState(0);
const onClickHandler = () => {
setData(data + 1);
};
return (
<div className="button" onClick={onClickHandler}>
{data}
</div>
);
}
export default Example;
I will test the component like this -
import React from "react";
import { shallow } from "enzyme";
import Example from "./Example";
it("example test", () => {
const wrraper = shallow(<Example />);
wrraper.find(".button").simulate("click");
expect("test somethig");
});
If I will use styles.module like this -
import React, { useState } from "react";
import styles from "./styles.module.scss";
function Example() {
const [data, setData] = useState(0);
const onClickHandler = () => {
setData(data + 1);
};
return (
<div className={styles.button} onClick={onClickHandler}>
{data}
</div>
);
}
export default Example;
I will not be able to find and element in the test using ".button" anymore, since webpack will add a hash to my class name when I am using css modules.
So how can I test react compoennt while using css modules? Only by adding an Id to the element?
It fills wrong to change my code so I will be able to test it.

Answer 1

There are many alternative selectors, which you can find here. That said, when working with (s)css modules, I tend to lean on the element position within the component:
wrapper.find("div").first() will select the first div element within the component heirarchy (or in your example, it'll select the div with the "styles.button" className).
Another alternative is to use template literals. With the example below, I essentially created an escape hatch to select .some-classname:
import React, { useCallback, useState } from "react";
import { button } from "./styles.module.scss";
function Example() {
const [data, setData] = useState(0);
const onClickHandler = useCallback(() => {
setData(prevSate => prevState + 1);
}, [setData]);
return (
<div className={`${button} some-classname`} onClick={onClickHandler}>
{data}
</div>
);
}
export default Example;
And lastly, you can use a data-attribute -- like data-test-id (which is becoming more popular because of react-testing-library) to create a simple static selector that can be removed with an additional babel plugin for production builds).

Answer 2

I'm kinda late to the party but I was wondering this myself. You just have to import your scss module into your test file, like this :
import React from "react";
import { shallow } from "enzyme";
import Example from "./Example";
import styles from "./styles.module.scss
it("example test", () => {
const wrraper = shallow(<Example />);
wraper.find(`.${styles.button}`).simulate("click");
expect("test somethig");
});