测试与玩笑，酶和CSS模块反应的组件

Question

我有一个使用create react应用程序创建的项目。可以说我有一个像这样的简单组件-

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;

我将像这样测试组件-
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");
});

如果我将像这样使用styles.module-
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;

我将无法再使用“ .button”在测试中查找和添加元素，因为当我使用CSS模块时，webpack会将哈希添加到我的类名称中。那么如何在使用CSS模块时测试react compoennt？仅通过向元素添加ID？更改我的代码很不正确，因此我可以对其进行测试。
谢谢，迪娜

Answer 1

有很多替代选择器，您可以找到here。就是说，在使用（s）css模块时，我倾向于依靠组件中的元素位置：

[wrapper.find("div").first()将选择组件层次结构中的第一个div元素（或者在您的示例中，它将使用“ styles.button” className选择div）。

另一种替代方法是使用template literals。在下面的示例中，我基本上创建了一个逃生阴影以选择.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;

[最后，您可以使用data-attribute-像data-test-id（由于[C​​0]而变得越来越流行）来创建一个简单的静态选择器，可以使用其他babel插件将其删除以进行生产构建。）