2

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

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 模块时测试反应组件？仅通过向元素添加 Id ？更改我的代码是错误的，因此我将能够对其进行测试。

谢谢，迪娜

4

2 回答 2

1

有许多替代选择器，您可以在此处找到。也就是说，在使用 (s)css 模块时，我倾向于依赖组件中的元素位置：

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

另一种选择是使用模板文字。在下面的示例中，我基本上创建了一个逃生舱口来选择.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 --like （由于react-testing-librarydata-test-id而变得越来越流行）来创建一个简单的静态选择器，可以使用额外的 babel 插件将其删除以用于生产构建）。

于 2019-11-29T06:55:15.443 回答
-3

我参加聚会有点晚了，但我自己也在想这个。您只需要将 scss 模块导入测试文件，如下所示：

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");
});
于 2020-09-02T11:43:55.750 回答