[Question] Marking html elements for testing

marko93ue
创建于
2018-04-19 18:02:26

Hi, i have part of component that renders like this:

return(
<div className={style.OuterWrapper}>
    <div 
       className={style.Item} 
       onClick={this.yesterdayFn}
       day='yesterday'
    >
       Yesterday
    </div>
    <div
      className={style.Item}
      onClick={this.todayFn}
      day='today'
    >
      Tomorrow
    </div>
    <div
      className={style.Item}
      onClick={this.tomorrowFn}
      day='tomorrow'
    >
      Today
    </div>
</div>
);

I'v been using day prop to find elements during testing with enzyme.
Like this: wrapper.find('day=["today"]').simulate('click') but I don't like it very much. Only other option that comes to my mind is for each clickable div make custom class name and search by class name.

Search by text , function name or div position makes tests very fragile so I would like to avoid it.

How do you mark html elements for easy searching?

2条回答
gaearon
回复于
2018-04-19 18:10:47
#1

You can mark them with some special attribute, e.g. data-testid="something".

marko93ue
回复于
2018-04-19 18:14:46
#2

Thanks for quick response. Seems like special attribute it is.

当前位于第1页,总计2 条回复

推荐相似问题

[Question]: Unknown DOM attributes with boolean values

Do you want to request a feature or report a bug? Neither - question What is the current behavior? Currently, it seems t
讨论数 2
react
创建时间:2018-04-19 17:32:20

Render Props & getDerivedStateFromProps Issue!

Hi guys, Do you want to request a feature or report a bug? Possibly a bug. What is the current behavior? There is an iss
讨论数 3
react
创建时间:2018-04-19 15:33:16

Cannot read property 'changedBits' of undefined

Do you want to request a feature or report a bug? Bug What is the current behavior? Using the new Context API in React N
讨论数 7
react
创建时间:2018-04-18 23:07:01

onChange doesn't fire if a capture-phase document listener for the underlying native event calls setState()

Do you want to request a feature or report a bug? A bug What is the current behavior? Checkbox not fires onChange for co
讨论数 14
react
创建时间:2018-04-18 17:20:25

Render errors overwrite previous HTML

Do you want to request a feature or report a bug? Bug What is the current behavior? In React 15, render errors which kil
讨论数 2
react
创建时间:2018-04-18 16:10:38

React 16.3.2 - SSR Image onLoad hydrate does not work in Chrome

Do you want to request a feature or report a bug? Bug What is the current behavior? In chrome, does not seem to fire if
讨论数 6
react
创建时间:2018-04-18 15:45:36

How to traverse the React tree?

I would like to propose to add a walkTree method in React. Today a lot of libraries relies on walking the React tree for
讨论数 14
react
创建时间:2018-04-18 12:44:04

Remote form submission via dispatchEvent broken in Firefox

Do you want to request a feature or report a bug? Bug What is the current behavior? The following does not result in onS
讨论数 13
react
创建时间:2018-04-18 08:10:23

First pass context is lost in Call - Return

I have been really enjoying my explorations into building better 'compound components' using the experimental react-call
讨论数 5
react
创建时间:2018-04-18 08:10:08

Why are there three same functions here?

in react.min.js version: 16.2.0
讨论数 2
react
创建时间:2018-04-18 06:02:34