小编som*_*491的帖子

如何使用react测试库获取带有testid的span元素的值?

我想使用反应测试库获取 span 元素的值。

我想做什么?

我有一个如下所示的 span 元素,显示一些值

render = () => {
    const count = 2;
    return (
        <span data-test-id="test-span">
            {count}
        </span>
     )
 }
Run Code Online (Sandbox Code Playgroud)

现在在我的测试中我访问如下元素,

const span_element = getByTestId('test-span');
Run Code Online (Sandbox Code Playgroud)

但我不知道如何检索它的价值。

我尝试使用 span_element.value 但说“HTMLElement 上不存在属性值”

我怎样才能解决这个问题。有人可以帮我解决这个问题吗?谢谢。

javascript reactjs react-testing-library

12
推荐指数
1
解决办法
3万
查看次数

如何使用 React 测试库获取指定类的第一个元素?

我想访问带有“icon”类的第一个元素。

DOM 看起来是这样的:

<div class="parent">
    <div data-testid="add">
        <div class="info"></div> 
        <div class="action">
            <div class="icon"/> // <== I want to access this 
        </div>
    </div>
</div>
<div class="parent">
    <div data-testid="add">
        <div class="info"></div> 
        <div class="action">
            <div class="icon"/> 
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

如何获得第一个带有“icon”类的div?

我努力了:

const element  = queryAllByTestId('add')[0].querySelector(
    'div'
  )[1];
Run Code Online (Sandbox Code Playgroud)

这使得元素未定义。

reactjs react-testing-library

9
推荐指数
1
解决办法
3万
查看次数

如何使用 javascript 检查 HTMLCollection 是否包含具有给定类名的元素?

您好,我是编程新手,我想使用 javascript 访问对象内的数组...

我有如下的数据结构,

const some_obj = {
    accessKey: "",
    children: [
        div.someclassname,
        div.someclassname,
        div.someclassname.highlight,
    ]
}
Run Code Online (Sandbox Code Playgroud)

下面是我记录变量时在浏览器控制台中的样子。

object
current: div.wrapper
    accessKey: ""
    align: ""
    childElementCount: 4
    childNodes: NodeList(4) [div.someclassname, div.someclassname.highlight, 
    div.someclassname]
    children: HTMLCollection(4) [div.someclassname, 
    div.someclassname.highlight, div.someclassname]
Run Code Online (Sandbox Code Playgroud)

在控制台中打印 some_obj.children 会给出以下输出。object.children HTMLCollection(3) 0: div.someclassname 1: div.someclassname.highlight 2: div.someclassname

现在,我想从 some_obj 检查 some_obj 子数组中是否有 div.classname.highlight 。我该怎么做。

我尝试使用 some_obj.current.children.find() 但说 find 不是函数。

我如何检查 some_obj 子级是否具有 div.someclassname.highlight。有人可以帮我解决这个问题吗?谢谢

javascript

7
推荐指数
2
解决办法
2万
查看次数

如何使用 React 和 TypeScript 将事件侦听器添加到通过 ref 访问的 div 元素?

我想使用 ref 将事件侦听器添加到 div 元素。

我将 ref div_ref 添加到 Wrapper div 并在 enableDragEventListeners 方法中访问该 div_ref,以将事件侦听器添加到 componentmount 上。

下面是我的代码,

const SomeComponent: React.FC<any> = props => {
    const div_ref  = React.useRef(null);
    React.useEffect(() => {
        const enableDragEventListeners = () => {
            const div = dropRef.current;
            if (div) {
                div.addEventListener('dragenter', handleDragIn); // get error here
                div.addEventListener('dragleave', handleDragOut); //error here
                div.addEventListener('dragover', handleDrag);//error here
                div.addEventListener('drop', handleDrop);//error here
            } 
        };
        enableDragEventListeners();
    }, []);

    return (
        <Wrapper ref={div_ref}>
           {dragging && <Overlay>{props.children}</Overlay>}
        </Wrapper>
    );
}
Run Code Online (Sandbox Code Playgroud)

但我收到错误属性 addEventListener 在类型“从不”上不存在。有人可以帮我解决这个问题吗?谢谢。

编辑:完整的代码如下所示...我正在实现一个拖放组件,因此将其包装在想要使用它的组件周围,以便能够将文件拖放到其中。 …

typescript reactjs

5
推荐指数
1
解决办法
6692
查看次数

如何使用 string.prototype.matchall polyfill?

我希望String.prototype.matchAll()方法也能在边缘浏览器中工作。于是想到使用“string.prototype.matchall”npmjs包

我已经安装了这个包并main.js像这样导入到我的文件中

import 'string.prototype.matchall';
Run Code Online (Sandbox Code Playgroud)

我必须在其他文件中使用这种方法,Input.js.所以我使用如下

const matchAll = require('string.prototype.matchall');
Run Code Online (Sandbox Code Playgroud)

在我实际匹配字符串的方法中

replace = (original_string) => {
  const regex_pattern = /\\d+@*)]/g;
  const matchAll = require('string.prototype.matchall'); 
  const matches = original_string.matchAll(regex_pattern);
  return matches;
}
Run Code Online (Sandbox Code Playgroud)

matchAll变量未使用。我如何使用这个string.prototype.matchall polyfill。有人可以帮我解决这个问题吗?谢谢。

javascript shim

4
推荐指数
2
解决办法
4257
查看次数

通过执行 javascript 在 python 中使用 selenium webdriver 隐藏元素

我想通过执行javascriptin来隐藏画布元素上的元素python

我已经尝试过以下:

    def hide_elements():
        driver = LiveLibrary.get_webdriver_instance()

        js_script = '''\
        element1 = document.getElementsByClassName('someclass');
        element1[0].style.display = 'none';
        element2 = document.getElementsByClassName('another');
        element2[0].style.display = 'none';
        element3 = document.getElementsByClassName('highlight');
        element3[0].style.display = 'none';
        element4 = document.getElementsByClassName('overlay');
        element4[0].style.display = 'none';
        '''
        driver.execute_script(js_script)
Run Code Online (Sandbox Code Playgroud)

上面的代码有效,但正如您所看到的,有重复的代码。有没有办法可以简化这个过程,而不是找到每个元素并隐藏它们?

javascript python selenium-webdriver

3
推荐指数
1
解决办法
8355
查看次数

如何使用反应测试库获取带有一些测试 ID 的父 div 的子 div?

我想用一些 test-id 获取父元素中的 div 元素

我想做什么?

我有一个 test-id 为“parent-2”的父 div,其中有一个 div 元素,其中包含文本 Remove。

我想检索这个 Remove div 元素。还有多个 Remove div 元素。像下面这样的东西

<div data-test-id="parent-1">
    <div>Remove</div>
</div>
<div data-test-id="parent-2">
    <div>Remove</div>
</div>
<div data-test-id="parent-3">
    <div>Remove</div>
</div>
Run Code Online (Sandbox Code Playgroud)

所以在上面的 html 代码中,我想点击 Remove div from div with parent test-id = "parent-2"

我试过像下面这样

utils.fireEvent.click(getByText('Remove'));
Run Code Online (Sandbox Code Playgroud)

这会引发错误,发现多个 Remove 实例。

我也试过这个 utils.fireEvent.click(getByTestId('parent-2').children[0];

这有效。但这会访问父级的第一个子级。但是想要更具体的查询。

那么我该如何解决这个问题,以便我可以点击删除 div 属于 test-id "parent-2" 的 div

谢谢。

react-testing-library

2
推荐指数
2
解决办法
3471
查看次数

如何使用反应和打字稿在同一组件文件中使用上下文?

我想从一个组件访问另一个组件的状态。为此,我只想将 contextprovider 包装到单击按钮时状态发生变化的组件,并从 usehook 返回状态,以便另一个组件可以访问该状态。

下面是在没有应用上下文的情况下组件的外观,

function UploadButton () { //this is where state is set
    const [isDialogOpen, setIsDialogOpen] = React.useState(false); 
     
    const handleClick = () => {
        setIsDialogOpen(!isDialogOpen);
    }
    return (
        <>
            <Button onClick={handleClick}/>
            {isDialogOpen && <Upload/>}
        </>
    ); 
}

function UserButton() { //this is where state is accessed
    return (
        <Icon/> //this icon should be displayed only if !isDialogOpen
    );
}
Run Code Online (Sandbox Code Playgroud)

上下文如下所示,我在 UploadButton 所在的同一文件中有 DialogContext。

 interface DialogCtxState {
     isDialogOpen: boolean;
     setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }

 const initialDialogState: DialogCtxState = {
     isDialogOpen: …
Run Code Online (Sandbox Code Playgroud)

typescript reactjs

1
推荐指数
1
解决办法
3540
查看次数

如何使用上下键盘箭头键使下拉菜单可用并使用反应输入键?

我是编程新手,我想实现一个下拉菜单,可以使用向上或向下箭头导航并输入键盘键。

我想做什么?我有一个下拉组件,列出了从父组件传递给它的项目。目前它通过鼠标单击选择下拉菜单中的项目。我希望它也可以与向上和向下箭头键和输入键一起使用。

我试图做什么?下面的代码片段适用于鼠标点击。

class Parent extends React.PureComponent {
    state = {
        input_val: '',
    }

    handle_item_select = (val) => {
        this.setState({input_val: val});
    } 
    handle_input_change = (e) => {
        this.setState({input_val: e.target.value;
    }

    render = () => {
        return (
            <input 
                on_change={this.handle_input_change}/>
            <DropDown
                on_change={this.handle_item_select}
                values={this.state.items}/>
        )
     }
 }

class DropDown extends React.PureComponent {
    handle_item_select = (value) => {
        this.props.on_change(value);
    };

    render() {
        return (
            <div>
                 {this.props.values.map((value, index) =>
                     <Item
                         key={index}
                         value={value}
                         on_select={this.handle_item_select}
                     />)}
            </div>
        );
    }
}


class Item extends React.PureComponent {
    handle_item_select …
Run Code Online (Sandbox Code Playgroud)

reactjs

0
推荐指数
1
解决办法
905
查看次数

如何在 Windows 10 linux 子系统上卸载 terraform 并安装较新版本的 terraform?

我想在 Windows 10 linux 子系统上安装较新版本的 terrafrom 0.12.24。我是使用这个界面的新手,我不知道该怎么做

我使用这些命令在 Windows 10 linux 子系统上安装了 terraform

wget https://releases.hashicorp.com/terraform/0.11.13/terraform_0.11.13_linux_amd64.zip -O 
terraform.zip; 
unzip terraform.zip; 
sudo mv terraform /usr/local/bin; 
rm terraform.zip;
Run Code Online (Sandbox Code Playgroud)

但是这安装了旧版本..当我运行一些脚本时,它给了我这个错误。

无法加载根配置模块:解析 terraform/local/terraform.tf 时出错:在 119:12:未知令牌:119:12 IDENT 文件

为了解决这个问题,我计划从 0.12.24 升级到较新版本的 terra。有人可以向我提供卸载和安装较新版本 terraform 的命令吗?

linux terraform

0
推荐指数
2
解决办法
1万
查看次数