Question

我正在寻找一种方法来检查我的钩子组件中的状态是否正确更新。该组件是一个简单的下拉菜单，单击后即可打开和关闭。

我尝试了几种不同的方法在测试中安装组件并使用jest模拟函数。但是我还没有找到测试状态更新的方法。

我有一个带有功能Dropdown的组件handleClick：

const Dropdown = props => {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(prev => !prev);
  };

我在div中有一个按钮，单击该按钮将切换我的钩子状态：

<div>
          <Button
            className="classes.menuButton"
            onClick={handleClick}
            aria-label="menu"
          >
            <FontAwesomeIcon icon={faChevronDown} />
          </Button>
</div

我的单元测试试图安装组件，模拟单击，然后评估状态。

it('clicking button toggles open', () => {
    let results;
    function HookWrapper(){
      results = Dropdown();
      return null;
     };
    mount(<HookWrapper />)
    // console.log(results.state)
    wrapper.find('button').simulate('click');
    // console.log(wrapper.find('button').debug())
    expect(results.open).toEqual(true)
  })

我收到一条错误消息，告诉我result.open是未定义的。有什么办法可以访问钩子状态？我也想知道将其转换为快照测试是否更好。单击按钮后进行快照并进行比较。
任何帮助将不胜感激。

Answer 1

最好即使可能也不要使用测试中的状态。有几个原因，让我们从与维护相关的角度开始：任何单一的重构（到功能组件，到Redux连接，用HOC包装，重组状态）都可能破坏测试，这是通往地狱的道路。你不要这个同样，这将减少价值测试带来的一半（重构过程中的保证感觉）。

因此设置道具，在嵌套组件上运行回调道具并验证渲染结果

DECLARE @dtStart DATE = '2016-08-01';
DECLARE @dtEnd DATE = '2016-08-31';

SELECT p.Id, p.Title, SUM(t.Quantity), SUM(t.TotalAmount) AS Amount
FROM Transactions t
INNER JOIN Products p ON t.ProductId = p.Id
WHERE t.[TimeStamp] >= @dtStart AND CAST(t.[TimeStamp] AS DATE) <= @dtEnd
UNION ALL
SELECT p.Id, p.Title, SUM(t.Quantity), SUM(t.TotalAmount) AS Amount
FROM CCTransactions t
INNER JOIN Products p ON t.ProductId = p.Id
WHERE t.[TimeStamp] >= @dtStart AND CAST(t.[TimeStamp] AS DATE) <= @dtEnd
GROUP BY p.Id, p.Title
ORDER BY Title

轻松自在。

通过Jest单元测试访问React Hooks状态

1 个答案: