带有 jest 和 react-testing-library 的测试方法

Question

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

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

import React from "react";

const simpleComponents = (props) => {

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

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

export default simpleComponents;

Answer 1

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

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

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

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

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

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

Answer 2

simpleMethod function 在simpleComponents SFC 的私有 scope 中定义。 它没有暴露，因此您无法在simpleComponents之外获得 function 。

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

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

首先，您需要使用诸如click , submit之类的事件来触发它。 我们添加了一个console.log方法，所以我们可以窥探console.log方法，检查是否调用了simpleMethod function。