React 测试库未在快照中显示输入 onChange 道具

Posted

技术标签:

【中文标题】React 测试库未在快照中显示输入 onChange 道具【英文标题】:React testing library not displaying input onChange prop in snapshot 【发布时间】:2020-12-18 19:38:45 【问题描述】:

我有一个使用 RTL 和 Jest 的简单快照测试,我在 typeplaceholder 旁边使用的任何其他道具我在生成的快照中看不到它。这是我的输入组件:(我正在使用样式化组件)

const TextField = ( className, placeholder, onChange, type ) => 
  return (
    <Styled>
      <Styled.input
        type=type
        placeholder=placeholder
        className=className
        onChange=onChange
      />
    </Styled>
  );
;

这是我的测试:

  it('shall render correctly', () => 
    const  asFragment   = render(
      <ThemeProvider theme=theme>
        <TextField placeholder="Ramdom text" type="search" onChange=jest.fn() />
      </ThemeProvider>,
    );

    expect(asFragment()).toMatchSnapshot();
  );

生成的快照:

exports[`TextField component shall render correctly 1`] = `
<DocumentFragment>
  .c0 
  position: relative;


.c1 
  width: 100%;
  outline: none;
  border: solid 0px;
  border-radius: 10em;
  background: #f4f5f8;
  padding: 8px 8px 8px NaNpx;
  font: 400 1.6rem/normal 'Open Sans','Helvetica','Arial',sans-serif;
  -webkit-letter-spacing: normal;
  -moz-letter-spacing: normal;
  -ms-letter-spacing: normal;
  letter-spacing: normal;
  text-transform: none;


<label
    class="c0"
  >
    <input
      class="c1"
      placeholder="Ramdom text"
      type="search"
    />
  </label>
</DocumentFragment>
`;

如您所见,输入道具中没有 onChange 道具。

【问题讨论】:

【参考方案1】:

您的 JSX 中的onChange 是 React 提供的事件处理程序,它没有显示在 RTL 呈现的实际 DOM 中。

【讨论】:

不仅 onChange 甚至一个 prop "blabla" 都不会显示,除了官方 HTLM 输入属性之外的任何东西都不会显示

以上是关于React 测试库未在快照中显示输入 onChange 道具的主要内容,如果未能解决你的问题,请参考以下文章

存储库未在 docker build 中登录

Boost 库未在 Netbeans 中使用 G++ 编译

Android Tensorflow Lite C++ .SO 库未在运行时链接

如何在 React 中测试子函数?快照是

[xamarin][uwp][custom renderer] 自定义渲染器 pcl 库未在发布模式下加载

快照测试的工作原理以及 toMatchSnapshot() 函数在 React 组件的 Jest 快照测试中的作用是啥?