2

我无法得到答案，如何无法使用 jest 和 react-testing-library 达到功能组件内部的方法。

我尝试使用酶，但我看到一切都在改变为 RTL。

import React from "react";

const simpleComponents = (props) => {

    const simpleMethod = () =>{ 
        // method logic
    };

    return <h1>test</h1>;
    };
}

export default simpleComponents;
4

2 回答 2

2

您应该尝试只测试您的用户在真实浏览器中看到的内容，而不是您的组件内部逻辑。这就是 react-testing-library 所提倡的：编写能够提供信心的测试，因为他们看到/做真实用户会做的事情。

https://testing-library.com/docs/guiding-principles

遵循这些指南，您应该尝试构建一个测试来触发可见元素（由您的组件呈现）上的用户交互，并且这将涉及执行 simpleMethod。

这是 react-testing-library 查询的全部要点：getByText、getByPlaceholder、getByRole：真实用户会看到的东西，隐藏了内部逻辑。但我想你可以用酶来做这种方法（我从来没有用过酶）。

使用这种方法编写测试会导致测试更少，但测试更强，恕我直言，这是一件好事。它与测试函数、输入、输出...的经典单元测试（例如在 Java 上下文中）完全不同。

事实上，你的 React 组件是一个函数，它的输入是用户交互，它的输出是一个 DOM。

于 2020-05-07T19:37:51.997 回答
0

simpleMethod函数定义在simpleComponentsSFC 的私有范围内。它没有暴露，因此您无法在simpleComponents.

但是你可以间接测试它，例如：

const simpleMethod = () =>{ 
  console.log('method logic');
};

首先，您需要使用诸如click,之类的事件submit来触发它。我们添加了一个console.log方法，因此我们可以监视该console.log方法，以检查simpleMethod函数是否被调用。

于 2020-05-03T05:07:17.403 回答