Question

我正在按照有关如何测试我的组件的教程开玩笑，并且想知道是否遗漏了任何东西。我正在测试自己的weatherApp.js，其唯一目的是用TemperatureData.js的颜色来显示colorize.js的信息

export default class Weather extends React.Component {
    constructor(props) {
        super(props);
        this.state = {temp: undefined}}
    componentDidMount() {temperatureData().then(temp => {this.setState({temp: temp})})
    }
    render() {
        const temperature = this.state.temp;
        return <>{this.state.temp === undefined ?<somegraph />:<p style={{ color: colorize(temperature) }} id="temperature">{temperature}</p>}</>
    }
}

这是我必须测试此应用程序的地方，我不确定是否需要测试其他任何东西或缺少什么，请感谢任何输入。

describe("<WeatherApp> component test", () => {
  test("displays data from temperature data", async () => {
    const mockedTemp = "something irrelevant";
    temperatureData.mockImplementation(() => {
      return Promise.resolve(mockedTemp)
    })
    const weatherComponent = render(<WeatherApp />);
    expect(temperatureData).toHaveBeenCalled()
    await wait(() => {
      const paragraph = weatherComponent.getByText(mockedTemp)
      //console.log(paragraph)
      expect(paragraph).toBeInTheDocument()
      expect(paragraph).toBeDefined()
    });
  })
})

我不确定是否应该根据我的温度输入测试是否返回了正确的颜色，因为我对我的着色文件进行了单独的单元测试...

Answer 1

通过在测试命令行中添加jest选项，您可以配置--coverage=true来报告test coverage信息：

jest --coverage=true

测试覆盖率将为您提供测试中所缺少内容的第一提示。

例如，如果您忘记测试基于三元运算符的条件渲染（在这种情况下，则不会测试this.state.temp是undefined，<somegraph />应该显示），覆盖率报告（something like this）将为您提供未发现的行，这是了解您是否忘记测试组件的一些基本逻辑的很好的指示。

但是，测试覆盖范围可能未意识到一些更枯燥的逻辑，例如副作用或CSS样式等。有时，您需要再考虑一下，以便在组件中测试更具体的逻辑。

我建议您先通过查看覆盖率报告来确保您没有发现任何行。希望对您有所帮助！

Answer 2

单元测试是否足够取决于您定义为组件的关键标准的条件。如果确保温度以正确的颜色显示至关重要，则可能应该进行测试。但是，正如您所说，您需要对colorize函数进行单独的测试，这样就足够了。如果您对它可以运行充满信心，则无需在weatherApp.js

中再次对其进行测试。

这些决定是相对主观的，也是单元测试具有挑战性的原因之一-关于要测试的内容的说明性答案相对较少。要获得更好的指导，请this is a pretty good read on the subject。

但是，有一些结构化组件的方法可以简化单元测试，并且在这方面，我建议更改组件的构建方式，因为我认为您真正关心的是：

WeatherApp组件显示彩色的温度数据

对吗？您不必真的会担心它会调用API ...数据可能来自任何地方。而且，您真的并不在乎它是否调用了colorize函数...只是应用了一种颜色。测试这些细节只会使您的单元测试变得脆弱，例如，如果您的API发生更改，则必须更新单元测试定义。

相反，请使WeatherApp组件无状态且具有呈现性。使用父组件来处理：

调用API
计算颜色
呈现WeatherApp

class ParentComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        temp: undefined,
        color: undefined,
      }
    }

    componentDidMount() {
      temperatureData().then(temp => {
        this.setState({
          temp: temp
          color: colorize(temp)
        })
      })
    }

  render(
    return (
      <WeatherApp temp={this.state.temp} color={this.state.color} />
    )
  )
}

然后您的测试看起来像这样：

describe("<WeatherApp> component test", () => {
  test("displays data from temperature data", () => {
    const mockedTemp = "something irrelevant";

    const weatherComponent = render(<WeatherApp temp={mockedTemp} />);

    const paragraph = weatherComponent.getByText(mockedTemp)
    expect(paragraph).toBeInTheDocument()
  })
})

您可以在测试中包括颜色，也可以不...由您自己决定。

由于您可以分别测试构成父组件的所有3个units（temp / color / weatherApp），因此您可以相对确信父组件可以工作。另外，您还不需要在单元测试中编写任何异步代码。

JEST测试反应组件

2 个答案: