草庐IT

javascript - React-testing-library:因输入而改变

coder 2025-03-12 原文

我正在尝试测试组件是否会因输入元素的更改而更新。我使用 fireEvent.change() 函数，如果我随后检查我使用 getByPlaceholderText 找到的节点的值，它已按预期更新。但是我看不到 react 组件本身的变化。

这可能是因为更改直到重新渲染才会发生；我将如何测试这个？ react-testing-library 的 rerender 似乎“从头开始”启动组件(即没有新的输入值)，并且 waitForElement 永远找不到它在等待什么。

这是组件 TestForm.js:

import React from 'react';
import { withState } from 'recompose';

const initialInputValue = 'initialInputValue';

const TestForm = ({ inputValue, setInputValue }) => (
  <>
    {console.log('inputValue', inputValue)}
    <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} placeholder="placeholder" />
    {inputValue !== initialInputValue && <div>Input has changed</div>}
  </>
);

export default withState('inputValue', 'setInputValue', initialInputValue)(TestForm);

下面是测试，使用 npx jest test.js 运行:

import React from 'react';
import { cleanup, fireEvent, render, waitForElement } from 'react-testing-library';

import TestForm from './TestForm';

afterEach(cleanup);

describe('TestForm', () => {
  it('Change input', async () => {
    const { getByPlaceholderText, getByText } = render(<TestForm />);
    const inputNode = getByPlaceholderText('placeholder');
    fireEvent.change(inputNode, { target: { value: 'new value' } });
    console.log('inputNode.value', inputNode.value);
    await waitForElement(() => getByText('Input has changed'));
  });
});

最佳答案

这段代码对我有用:

import React from "react";

const initialInputValue = "initialInputValue";

class TestForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: initialInputValue };
  }
  render() {
    const { inputValue } = this.state;

    return (
      <div>
        {console.log("inputValue", inputValue)}
        <input
          value={inputValue}
          onChange={e => this.setState({ inputValue: e.target.value })}
          placeholder="placeholder"
        />
        {inputValue !== initialInputValue && <div>Input has changed</div>}
      </div>
    );
  }
}

import { render, cleanup, fireEvent } from "react-testing-library";
import "jest-dom/extend-expect";

afterEach(cleanup);

test("form", () => {
  const { getByPlaceholderText, getByText } = render(<TestForm />);
  fireEvent.change(getByPlaceholderText("placeholder"), {
    target: { value: "new value" }
  });
  expect(getByText("Input has changed")).toBeInTheDocument();
});

虽然它在 codesandbox 中不起作用，我猜他们在保持浏览器和测试环境分离方面存在一些问题。

关于javascript - React-testing-library:因输入而改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53436344/

React-testing-libraryjavascriptinputValueinitialInputValuecodereactjsunit-testing

有关javascript - React-testing-library:因输入而改变的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby - 鸭子输入字符串、符号和数组的优雅方式？ - 2

    这是针对我无法破坏的现有公共(public)API，但我确实希望对其进行扩展。目前，该方法采用字符串或符号或任何其他在作为第一个参数传递给send时有意义的内容我想添加发送字符串、符号等列表的功能。我可以只使用is_a吗？数组，但还有其他发送列表的方法，这不是很像ruby​​。我将调用列表中的map，所以第一个倾向是使用respond_to?:map。但是字符串也会响应:map，所以这行不通。 最佳答案 如何将它们全部视为数组？String的行为与仅包含String的Array相同:deffoo(obj,arg)[*arg].eac

  3. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  6. ruby - ruby 中的同一个程序如何接受来自用户的输入以及命令行参数 - 2

    我的ruby​​脚本从命令行参数获取某些输入。它检查是否缺少任何命令行参数，然后提示用户输入。但是我无法使用gets从用户那里获得输入。示例代码:test.rbname=""ARGV.eachdo|a|ifa.include?('-n')name=aputs"Argument:#{a}"endendifname==""puts"entername:"name=getsputsnameend运行脚本:rubytest.rbraghav-k错误结果:test.rb:6:in`gets':Nosuchfileordirectory-raghav-k(Errno::ENOENT)fromtes

  7. ruby 单元测试 : run some code after each failed test - 2

    在Test::Unit中的ruby​​单元测试断言失败后，在执行teardown之前，是否有一些简洁优雅的方法来立即执行我的代码？我正在做一些自动化的GUI测试，并希望在出现问题后立即截图。 最佳答案 如果您使用的是1.9，请不要使用Test::Unit::TestCase作为您的基类。对其进行子类化并覆盖#run_test以进行救援，截取屏幕截图并重新提出:classMyAbstractTestCase或者，我认为这实际上是最简洁的方法，您可以使用before_teardownHook:classMyTestCase这不适用于1.

  8. ruby-on-rails - 为什么用户必须输入 7 位数的 Twitter PIN 才能授予我的应用程序访问权限？ - 2

    我正在为我的用户实现一些ruby​​onrails代码推特内容。我正在创建正确的oauth链接...类似http://twitter.com/oauth/authorize?oauth_token=y2RkuftYAEkbEuIF7zKMuzWN30O2XxM8U9j0egtzKv但在我的测试帐户授予对twitter的访问权限后，它会弹出一个页面，上面写着“您已成功授予对.我不知道用户应该在哪里输入此PIN以及他们为什么必须这样做。我认为这不是必要的步骤。Twitter应该将用户重定向到我在应用程序设置中提供的回调URL。有谁知道为什么会这样？更新我找到了thisarticle声明我需

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby - 使用 Ruby 将输入值适本地转换为整数或 float - 2

    我相信我对这个问题有一个很好的答案，但我想确保ruby​​-philes没有更好的方法来做到这一点。基本上，给定一个输入字符串，我想在适当的情况下将该字符串转换为整数，或在适当的情况下将其转换为float。否则，只返回字符串。我会在下面发布我的答案，但我想知道是否有更好的方法。例如:to_f_or_i_or_s("0523.49")#=>523.49to_f_or_i_or_s("0000029")#=>29to_f_or_i_or_s("kittens")#=>"kittens" 最佳答案 我会尽可能避免在Ruby中使用正则表达式

随机推荐