React testing library setting window=undefined

2021-01-15 10:22 zweistein imported from Stackoverflow

I am testing a react hook which gets the window-dimensions from window.innerheight and window.innerwidth. It uses the following code to handle server side rendering:

...

typeof window=="undefined" ? {width: 1024, height: 768} : functionToGetDimensions()

...

When trying to make tests for this line in react-testing-library i need to delete the window object:

...

const TestComponent = ({ }) => {
    const { width, height } = useWindowDimensions();
    return (
        <div>
            <p data-testid="width">{width}</p>
            <p data-testid="height">{height}</p>
        </div>)
}


describe('when window is undefined', () => {
    //@ts-ignore
    
    const testWidth = 1000;
    const testHeight = 800;

    const fallbackWidth = 1024; // when useWindowdimensions detects window = undefined
    const { window } = global;
    
beforeAll(() => {
      // @ts-ignore
      delete global.window;
    });
    afterAll(() => {
      global.window = window;
    }); 

    
    it('runs without error', () => {
        render(<TestComponent />)        
        expect(screen.queryByTestId("height")).toHaveTextContent(fallbackWidth );
    });
});

I get the following error:

ReferenceError: window is not defined

I've tried using node as test enviroment, but then document is not defined, and render does not work.

See also questions close to this topic

in react i want to select only one user my code is selecting every user

im facing issue when i click add friend button every button changes to requested how can i particularly set it to one user only which i clciked i tried few things but it is not working it is selecting every other user. i used handleproductselect function but it is not working i have given them individual id still it is not working

class SearchModal extends Component {
  constructor(props){
    super(props);
    this.state = {
        Input:"Add Friend",
        backgroundColor: 'white',
        active_id: null,
    }
}

async handleProductSelect(elementid){
  const id = elementid;
  const { backgroundColor } = this.state;
  let newBackgroundColour = backgroundColor === 'white' ? 'yellow' : 'white';
  this.setState({ 
    Input : "Requested",
    backgroundColor: newBackgroundColour,
    active_id: id
  })
  console.log(id)
}

render() {
    const {currentUser} = this.props;
    return (
       <div>
          <Modal show={this.state.show} onHide={this.handleClose} 
          >
             <Modal.Header closeButton>
               <Modal.Title>
                 <input 
                  type="text" 
                  placeholder="Search.."
                  value={search}
                  onChange={this.onTextboxChangeSearch}
                 ></input>
               </Modal.Title>
             </Modal.Header>
             <Modal.Body>
               <h3>Users</h3>
               <div>
                <ul className="collection">
                  {userdetails.map((element) => {
                    if(currentUser.user.username !== element.username){
                      return(
                        <div key={element._id}>
                          <li>{element.username}{' '}<input 
                          type="button" 
                          id={element._id} 
                          onClick={this.handleProductSelect.bind(this,element._id )} 
                          value={this.state.Input} 
                          style = {{backgroundColor: ( element._id === this.state.active_id ?  'yellow' : this.state.backgroundColor)}}></input></li>
                        </div>
                      );
                    }else{
                      return(
                        <div key={element._id}>
                          <li>{element.username}</li>
                        </div>
                      );
                    }
                  })}
                </ul>
               </div>
             </Modal.Body>
          </Modal>
        </div>
    )
  }
}

WHAT DHOULD I DO TO covert this code into js code?

export default { "kind": "customsearch#search", "url": { "type": "application/json", "template": "https://www.googleapis.com/customsearch/v1?q={searchTerms}&num={count?}&start={startIndex?}&lr={language?}&safe={safe?}&cx={cx?}&sort={sort?}&filter={filter?}&gl={gl?}&cr={cr?}&googlehost={googleHost?}&c2coff={disableCnTwTranslation?}&hq={hq?}&hl={hl?}&siteSearch={siteSearch?}&siteSearchFilter={siteSearchFilter?}&exactTerms={exactTerms?}&excludeTerms={excludeTerms?}&linkSite={linkSite?}&orTerms={orTerms?}&relatedSite={relatedSite?}&dateRestrict={dateRestrict?}&lowRange={lowRange?}&highRange={highRange?}&searchType={searchType}&fileType={fileType?}&rights={rights?}&imgSize={imgSize?}&imgType={imgType?}&imgColorType={imgColorType?}&imgDominantColor={imgDominantColor?}&alt=json" }, "queries": { "request": [ { "title": "Google Custom Search - null", "totalResults": "714000000", "searchTerms": "null", "count": 10, "startIndex": 1, "inputEncoding": "utf8", "outputEncoding": "utf8", "safe": "off", "cx": "4dd5f1a91dbb3df63" } ], "nextPage": [ { "title": "Google Custom Search - null", "totalResults": "714000000", "searchTerms": "null", "count": 10, "startIndex": 11, "inputEncoding": "utf8", "outputEncoding": "utf8", "safe": "off", "cx": "4dd5f1a91dbb3df63" } ] }, "context": { "title": "Google" }, "searchInformation": { "searchTime": 0.621603, "formattedSearchTime": "0.62", "totalResults": "714000000", "formattedTotalResults": "714,000,000" }, "items": [ { "kind": "customsearch#result", "title": "null - JavaScript | MDN", "htmlTitle": "\u003cb\u003enull\u003c/b\u003e - JavaScript | MDN", "link": "https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/null", "displayLink": "developer.mozilla.org", "snippet": "6 days ago ... The value null represents the intentional absence of any object value. It is one of \nJavaScript's primitive values and is treated as falsy for ...", "htmlSnippet": "6 days ago \u003cb\u003e...\u003c/b\u003e The value \u003cb\u003enull\u003c/b\u003e represents the intentional absence of any object value. It is one of \u003cbr\u003e\nJavaScript's primitive values and is treated as falsy for ...", "cacheId": "gM3xYrhtmoYJ", "formattedUrl": "https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/.../null", "htmlFormattedUrl": "https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/.../\u003cb\u003enull\u003c/b\u003e", "pagemap": { "BreadcrumbList": [ {} ], "metatags": [ { "theme-color": "#ffffff", "viewport": "width=device-width,initial-scale=1", "position": "1" } ] } }, { "kind": "customsearch#result", "title": "Null | Definition of Null by Merriam-Webster", "htmlTitle": "\u003cb\u003eNull\u003c/b\u003e | Definition of \u003cb\u003eNull\u003c/b\u003e by Merriam-Webster", "link": "https://www.merriam-webster.com/dictionary/null", "displayLink": "www.merriam-webster.com", "snippet": "Null definition is - having no legal or binding force : invalid. How to use null in a \nsentence. Did You Know?", "htmlSnippet": "\u003cb\u003eNull\u003c/b\u003e definition is - having no legal or binding force : invalid. How to use \u003cb\u003enull\u003c/b\u003e in a \u003cbr\u003e\nsentence. Did You Know?", "cacheId": "7pVU1R0KV8kJ", "formattedUrl": "https://www.merriam-webster.com/dictionary/null", "htmlFormattedUrl": "https://www.merriam-webster.com/dictionary/\u003cb\u003enull\u003c/b\u003e", "pagemap": { "cse_thumbnail": [ { "src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKksTSKYwpW8It403nrjw5t1_a8pLO2PI6ImEG7uvFrNfacgiziPZgG-_O", "width": "225", "height": "225" } ], "metatags": [ { "msapplication-tilecolor": "#2b5797", "og:image": "https://merriam-webster.com/assets/mw/static/social-media-share/mw-logo-245x245@1x.png", "twitter:title": "Definition of NULL", "twitter:card": "summary", "theme-color": "#ffffff", "twitter:url": "https://www.merriam-webster.com/dictionary/null", "og:title": "Definition of NULL", "twitter:aria-text": "Share the Definition of null on Twitter", "og:aria-text": "Post the Definition of null to Facebook", "og:description": "having no legal or binding force : invalid; amounting to nothing : nil; having no value : insignificant… See the full definition", "twitter:image": "https://merriam-webster.com/assets/mw/static/social-media-share/mw-logo-245x245@1x.png", "referrer": "unsafe-url", "fb:app_id": "178450008855735", "twitter:site": "@MerriamWebster", "viewport": "width=device-width, initial-scale=1.0", "twitter:description": "having no legal or binding force : invalid; amounting to nothing : nil; having no value : insignificant… See the full definition", "og:url": "https://www.merriam-webster.com/dictionary/null" } ], "cse_image": [ { "src": "https://merriam-webster.com/assets/mw/static/social-media-share/mw-logo-245x245@1x.png" } ] } }, { "kind": "customsearch#result", "title": "Gaerea -'Null' (official music video) 2020 - YouTube", "htmlTitle": "Gaerea -'\u003cb\u003eNull\u003c/b\u003e' (official music video) 2020 - YouTube", "link": "https://www.youtube.com/watch?v=v1ooMJ1jUxw", "displayLink": "www.youtube.com", "snippet": "May 13, 2020 ... Gaerea's official music video for the track 'Null', taken from their upcoming album '\nLimbo'. Release date: July 24, 2020. WE ARE GAEREA.", "htmlSnippet": "May 13, 2020 \u003cb\u003e...\u003c/b\u003e Gaerea's official music video for the track '\u003cb\u003eNull\u003c/b\u003e', taken from their upcoming album '\u003cbr\u003e\nLimbo'. Release date: July 24, 2020. WE ARE GAEREA.", "formattedUrl": "https://www.youtube.com/watch?v=v1ooMJ1jUxw", "htmlFormattedUrl": "https://www.youtube.com/watch?v=v1ooMJ1jUxw", "pagemap": { "cse_thumbnail": [ { "src": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTkJbQm9TyOvkUyYLnMN9Ir7v1DywDFlR5wC-ek6ayT3izewvdkPAM0NDmk", "width": "300", "height": "168" } ], "imageobject": [ { "width": "1280", "url": "https://i.ytimg.com/vi/v1ooMJ1jUxw/maxresdefault.jpg", "height": "720" } ], "person": [ { "name": "Season of Mist", "url": "http://www.youtube.com/user/SeasonOfMistLabel" } ], "metatags": [ { "og:image": "https://i.ytimg.com/vi/v1ooMJ1jUxw/maxresdefault.jpg", "twitter:app:url:iphone": "vnd.youtube://www.youtube.com/watch?v=v1ooMJ1jUxw&feature=applinks", "theme-color": "rgba(255,255,255,0.98)", "og:image:width": "1280", "twitter:card": "player", "og:site_name": "YouTube", "twitter:url": "https://www.youtube.com/watch?v=v1ooMJ1jUxw", "al:android:package": "com.google.android.youtube", "title": "Gaerea -'Null' (official music video) 2020", "al:ios:url": "vnd.youtube://www.youtube.com/watch?v=v1ooMJ1jUxw&feature=applinks", "twitter:app:id:iphone": "544007664", "og:description": "Gaerea's official music video for the track 'Null', taken from their upcoming album 'Limbo'. Release date: July 24, 2020. WE ARE GAEREA.Order here: http://re...", "al:ios:app_store_id": "544007664", "twitter:image": "https://i.ytimg.com/vi/v1ooMJ1jUxw/maxresdefault.jpg", "twitter:site": "@youtube", "og:video:type": "text/html", "og:video:height": "720", "og:video:url": "https://www.youtube.com/embed/v1ooMJ1jUxw", "og:type": "video.other", "twitter:title": "Gaerea -'Null' (official music video) 2020", "al:ios:app_name": "YouTube", "og:title": "Gaerea -'Null' (official music video) 2020", "og:image:height": "720", "twitter:app:id:ipad": "544007664", "al:web:url": "http://www.youtube.com/watch?v=v1ooMJ1jUxw&feature=applinks", "og:video:secure_url": "https://www.youtube.com/embed/v1ooMJ1jUxw", "og:video:tag": "gaerea", "og:video:width": "1280", "al:android:url": "vnd.youtube://www.youtube.com/watch?v=v1ooMJ1jUxw&feature=applinks", "fb:app_id": "87741124305", "twitter:app:name:ipad": "YouTube", "twitter:description": "Gaerea's official music video for the track 'Null', taken from their upcoming album 'Limbo'. Release date: July 24, 2020. WE ARE GAEREA.Order here: http://re...", "og:url": "https://www.youtube.com/watch?v=v1ooMJ1jUxw", "al:android:app_name": "YouTube", "twitter:app:name:iphone": "YouTube" } ], "videoobject": [ { "embedurl": "https://www.youtube.com/embed/v1ooMJ1jUxw", "playertype": "HTML5 Flash", "isfamilyfriendly": "true", "uploaddate": "2020-05-13", "description": "Gaerea's official music video for the track 'Null', taken from their upcoming album 'Limbo'. Release date: July 24, 2020. WE ARE GAEREA.Order here: http://re...", "videoid": "v1ooMJ1jUxw", "url": "https://www.youtube.com/watch?v=v1ooMJ1jUxw", "duration": "PT6M1S", "unlisted": "False", "name": "Gaerea -'Null' (official music video) 2020", "paid": "False", "width": "1280", "regionsallowed": "AD,AE,AF,AG,AI,AL,AM,AO,AQ,AR,AS,AT,AU,AW,AX,AZ,BA,BB,BD,BE,BF,BG,BH,BI,BJ,BL,BM,BN,BO,BQ,BR,BS,BT,BV,BW,BY,BZ,CA,CC,CD,CF,CG,CH,CI,CK,CL,CM,CN,CO,CR,CU,CV,CW,CX,CY,CZ,DE,DJ,DK,DM,DO,DZ,EC,EE,EG,EH...", "genre": "Music", "interactioncount": "102475", "channelid": "UC5TaZWeRgdN7klKM60Hj6rQ", "datepublished": "2020-05-13", "thumbnailurl": "https://i.ytimg.com/vi/v1ooMJ1jUxw/maxresdefault.jpg", "height": "720" } ], "cse_image": [ { "src": "https://i.ytimg.com/vi/v1ooMJ1jUxw/maxresdefault.jpg" } ] } }, { "kind": "customsearch#result", "title": "Null - Wikipedia", "htmlTitle": "\u003cb\u003eNull\u003c/b\u003e - Wikipedia", "link": "https://en.wikipedia.org/wiki/Null", "displayLink": "en.wikipedia.org", "snippet": "Null may refer to: Contents. 1 Science, technology, and mathematics. 1.1 \nComputing; 1.2 Mathematics; 1.3 Physics; 1.4 Other uses in science and \ntechnology.", "htmlSnippet": "\u003cb\u003eNull\u003c/b\u003e may refer to: Contents. 1 Science, technology, and mathematics. 1.1 \u003cbr\u003e\nComputing; 1.2 Mathematics; 1.3 Physics; 1.4 Other uses in science and \u003cbr\u003e\ntechnology.", "cacheId": "N5Dv23xCZiAJ", "formattedUrl": "https://en.wikipedia.org/wiki/Null", "htmlFormattedUrl": "https://en.wikipedia.org/wiki/\u003cb\u003eNull\u003c/b\u003e", "pagemap": { "metatags": [ { "referrer": "origin" } ] } }, { "kind": "customsearch#result", "title": "The Terrible Mistake of Choosing 'Null' as a License Plate - YouTube", "htmlTitle": "The Terrible Mistake of Choosing '\u003cb\u003eNull\u003c/b\u003e' as a License Plate - YouTube", "link": "https://www.youtube.com/watch?v=_c1am8NSx_s", "displayLink": "www.youtube.com", "snippet": "Jun 9, 2020 ... The Terrible Mistake of Choosing 'Null' as a License Plate. 2,681,508 views2.6M \nviews. • Jun 9, 2020. 92K. 2.7K. Share. Save. 92,296 / 2,757 ...", "htmlSnippet": "Jun 9, 2020 \u003cb\u003e...\u003c/b\u003e The Terrible Mistake of Choosing '\u003cb\u003eNull\u003c/b\u003e' as a License Plate. 2,681,508 views2.6M \u003cbr\u003e\nviews. • Jun 9, 2020. 92K. 2.7K. Share. Save. 92,296 / 2,757 ...", "formattedUrl": "https://www.youtube.com/watch?v=_c1am8NSx_s", "htmlFormattedUrl": "https://www.youtube.com/watch?v=_c1am8NSx_s", "pagemap": { "cse_thumbnail": [ { "src": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ9bAI1kARF7wrS9sbBJVBc5GxrK8DXRtIu_dpbza3fhWp8fnSYsb-8JEeS", "width": "300", "height": "168" } ], "imageobject": [ { "width": "1280", "url": "https://i.ytimg.com/vi/_c1am8NSx_s/maxresdefault.jpg", "height": "720" } ], "person": [ { "name": "Half as Interesting", "url": "http://www.youtube.com/channel/UCuCkxoKLYO_EQ2GeFtbM_bw" } ], "metatags": [ { "og:image": "https://i.ytimg.com/vi/_c1am8NSx_s/maxresdefault.jpg", "twitter:app:url:iphone": "vnd.youtube://www.youtube.com/watch?v=_c1am8NSx_s&feature=applinks", "twitter:app:id:googleplay": "com.google.android.youtube", "theme-color": "rgba(255,255,255,0.98)", "og:image:width": "1280", "twitter:card": "player", "og:site_name": "YouTube", "twitter:url": "https://www.youtube.com/watch?v=_c1am8NSx_s", "twitter:app:url:ipad": "vnd.youtube://www.youtube.com/watch?v=_c1am8NSx_s&feature=applinks", "al:android:package": "com.google.android.youtube", "twitter:app:name:googleplay": "YouTube", "title": "The Terrible Mistake of Choosing 'Null' as a License Plate", "al:ios:url": "vnd.youtube://www.youtube.com/watch?v=_c1am8NSx_s&feature=applinks", "twitter:app:id:iphone": "544007664", "og:description": "Sign up for a CuriosityStream subscription and also get a free Nebula subscription (the new streaming platform built by creators) here: http://CuriosityStrea...", "al:ios:app_store_id": "544007664", "twitter:image": "https://i.ytimg.com/vi/_c1am8NSx_s/maxresdefault.jpg", "twitter:player": "https://www.youtube.com/embed/_c1am8NSx_s", "twitter:player:height": "720", "twitter:site": "@youtube", "og:video:type": "text/html", "og:video:height": "720", "og:video:url": "https://www.youtube.com/embed/_c1am8NSx_s", "og:type": "video.other", "twitter:title": "The Terrible Mistake of Choosing 'Null' as a License Plate", "al:ios:app_name": "YouTube", "og:title": "The Terrible Mistake of Choosing 'Null' as a License Plate", "og:image:height": "720", "twitter:app:id:ipad": "544007664", "al:web:url": "http://www.youtube.com/watch?v=_c1am8NSx_s&feature=applinks", "og:video:secure_url": "https://www.youtube.com/embed/_c1am8NSx_s", "og:video:tag": "null", "og:video:width": "1280", "al:android:url": "vnd.youtube://www.youtube.com/watch?v=_c1am8NSx_s&feature=applinks", "fb:app_id": "87741124305", "twitter:app:url:googleplay": "https://www.youtube.com/watch?v=_c1am8NSx_s", "twitter:app:name:ipad": "YouTube", "twitter:description": "Sign up for a CuriosityStream subscription and also get a free Nebula subscription (the new streaming platform built by creators) here: http://CuriosityStrea...", "og:url": "https://www.youtube.com/watch?v=_c1am8NSx_s", "twitter:player:width": "1280", "al:android:app_name": "YouTube", "twitter:app:name:iphone": "YouTube" } ], "videoobject": [ { "embedurl": "https://www.youtube.com/embed/_c1am8NSx_s", "playertype": "HTML5 Flash", "isfamilyfriendly": "true", "uploaddate": "2020-06-09", "description": "Sign up for a CuriosityStream subscription and also get a free Nebula subscription (the new streaming platform built by creators) here: http://CuriosityStrea...", "videoid": "_c1am8NSx_s", "url": "https://www.youtube.com/watch?v=_c1am8NSx_s", "duration": "PT6M10S", "unlisted": "False", "name": "The Terrible Mistake of Choosing 'Null' as a License Plate", "paid": "False", "width": "1280", "regionsallowed": "AD,AE,AF,AG,AI,AL,AM,AO,AQ,AR,AS,AT,AU,AW,AX,AZ,BA,BB,BD,BE,BF,BG,BH,BI,BJ,BL,BM,BN,BO,BQ,BR,BS,BT,BV,BW,BY,BZ,CA,CC,CD,CF,CG,CH,CI,CK,CL,CM,CN,CO,CR,CU,CV,CW,CX,CY,CZ,DE,DJ,DK,DM,DO,DZ,EC,EE,EG,EH...", "genre": "Education", "interactioncount": "2681508", "channelid": "UCuCkxoKLYO_EQ2GeFtbM_bw", "datepublished": "2020-06-09", "thumbnailurl": "https://i.ytimg.com/vi/_c1am8NSx_s/maxresdefault.jpg", "height": "720" } ], "cse_image": [ { "src": "https://i.ytimg.com/vi/c1am8NSx_s/maxresdefault.jpg" } ] } }, { "kind": "customsearch#result", "title": "Exclusion of the null hypothesis - Wikipedia", "htmlTitle": "Exclusion of the \u003cb\u003enull\u003c/b\u003e hypothesis - Wikipedia", "link": "https://en.wikipedia.org/wiki/Exclusion_of_the_null_hypothesis", "displayLink": "en.wikipedia.org", "snippet": "In inferential statistics, the null hypothesis is a default hypothesis that a quantity to \nbe measured is zero (null). Typically, the quantity to be measured is the ...", "htmlSnippet": "In inferential statistics, the \u003cb\u003enull\u003c/b\u003e hypothesis is a default hypothesis that a quantity to \u003cbr\u003e\nbe measured is zero (\u003cb\u003enull\u003c/b\u003e). Typically, the quantity to be measured is the ...", "cacheId": "xXuKx_39w9IJ", "formattedUrl": "https://en.wikipedia.org/wiki/Exclusion_of_the_null_hypothesis", "htmlFormattedUrl": "https://en.wikipedia.org/wiki/Exclusion_of_the\u003cb\u003enull\u003c/b\u003e_hypothesis", "pagemap": { "metatags": [ { "referrer": "origin" } ] } }, { "kind": "customsearch#result", "title": "NULL - Manual - PHP", "htmlTitle": "NULL - Manual - PHP", "link": "https://www.php.net/manual/en/language.types.null.php", "displayLink": "www.php.net", "snippet": "NULL ¶. The special null value represents a variable with no value. null is the \nonly possible value of type null. A variable is considered to be null if: it has been\n ...", "htmlSnippet": "\u003cb\u003eNULL\u003c/b\u003e ¶. The special \u003cb\u003enull\u003c/b\u003e value represents a variable with no value. \u003cb\u003enull\u003c/b\u003e is the \u003cbr\u003e\nonly possible value of type \u003cb\u003enull\u003c/b\u003e. A variable is considered to be \u003cb\u003enull\u003c/b\u003e if: it has been\u003cbr\u003e\n ...", "cacheId": "UdiDMCZEYiMJ", "formattedUrl": "https://www.php.net/manual/en/language.types.null.php", "htmlFormattedUrl": "https://www.php.net/manual/en/language.types.\u003cb\u003enull\u003c/b\u003e.php", "pagemap": { "metatags": [ { "viewport": "width=device-width, initial-scale=1.0" } ] } }, { "kind": "customsearch#result", "title": "Null Furniture", "htmlTitle": "\u003cb\u003eNull\u003c/b\u003e Furniture", "link": "https://nullfurniture.com/", "displayLink": "nullfurniture.com", "snippet": "Null Furniture. Twitter · LinkedIn · Instagram 888-995-0260. About Us · Dealer \nLogin · Join Our Sales Team · Home; Categories. Accents · Chairside End Tables\n ...", "htmlSnippet": "\u003cb\u003eNull\u003c/b\u003e Furniture. Twitter · LinkedIn · Instagram 888-995-0260. About Us · Dealer \u003cbr\u003e\nLogin · Join Our Sales Team · Home; Categories. Accents · Chairside End Tables\u003cbr\u003e\n ...", "cacheId": "gEIhg0oiOk0J", "formattedUrl": "https://nullfurniture.com/", "htmlFormattedUrl": "https://\u003cb\u003enull\u003c/b\u003efurniture.com/", "pagemap": { "cse_thumbnail": [ { "src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnypjkLq9t0dZjMjVDzLRMn9ApIt_tI98AqJ15oB3U5ZMWQhTll5JGno6U", "width": "302", "height": "167" } ], "metatags": [ { "viewport": "width=device-width", "author": "nickgreene.com", "og:title": "Null Furniture", "og:url": "https://nullfurniture.com/" } ], "cse_image": [ { "src": "https://nullfurniture.com/uploads/media/images/homepage-panels/1219-home-panel.jpg" } ] } }, { "kind": "customsearch#result", "title": "guregu/null: reasonable handling of nullable values - GitHub", "htmlTitle": "guregu/null: reasonable handling of nullable values - GitHub", "link": "https://github.com/guregu/null", "displayLink": "github.com", "snippet": "If you need zero and null be considered separate values, use these. Types in \nzero are treated like zero values in Go: blank string input will produce a null zero.", "htmlSnippet": "If you need zero and \u003cb\u003enull\u003c/b\u003e be considered separate values, use these. Types in \u003cbr\u003e\nzero are treated like zero values in Go: blank string input will produce a \u003cb\u003enull\u003c/b\u003e zero.", "cacheId": "T7B1tmryJz0J", "formattedUrl": "https://github.com/guregu/null", "htmlFormattedUrl": "https://github.com/guregu/\u003cb\u003enull\u003c/b\u003e", "pagemap": { "cse_thumbnail": [ { "src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTwfHyCk0QSD0eByjSLIyu38h2iRVGLp2yJ9rDIMtazrYl55xcxKuiQjyA", "width": "225", "height": "225" } ], "softwaresourcecode": [ { "license": "LICENSE", "author": "guregu", "name": "null", "text": "null import "gopkg.in/guregu/null.v4" null is a library with reasonable options for dealing with nullable SQL and JSON values There are two packages: null and its subpackage zero. Types in..." } ], "metatags": [ { "apple-itunes-app": "app-id=1477376905", "og:image": "https://avatars.githubusercontent.com/u/131059?s=400&v=4", "twitter:card": "summary", "theme-color": "#1e2327", "og:site_name": "GitHub", "octolytics-event-url": "https://collector.githubapp.com/github-external/browser_event", "hovercard-subject-tag": "repository:23432446", "html-safe-nonce": "9b9962dd7f32f36f6ed30049425e360886bb898566853dab0841613e1d7ca225", "expected-hostname": "github.com", "octolytics-app-id": "github", "og:description": "reasonable handling of nullable values. Contribute to guregu/null development by

How to pass a variable inside cellRendererFramework in ag-grid?

I'm using ag-grid in my react project. Now It's working finely. But I need to add one more alteration there. Inside the cellRendererFramework, I need to pass the relevant id of the ticket. It must be the id, not the ticketId.It's in a separate field. How can I pass it inside the cellRendererFramework? Is it possible?

TicketTable.js

import React from 'react';
import IssueSnippet from './IssueSnippet/IssueSnippet';
import AgGridTable from '../DataTables/AgGridTable/AgGridTable';
import FilterBar from './FilterBar/FilterBar';
import { Archive, ArrowClockwise, Share, Pencil } from 'react-bootstrap-icons';
import moment from 'moment';

import PriorityBadge from '../PriorityBadge/PriorityBadge';
import UserIcon from '../UserIcon/UserIcon';
import TicketAction from './TicketAction/TicketAction';

import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import 'ag-grid-community/dist/styles/ag-grid.css';
import './TicketTable.scss';

const TicketTable = (props) => {
  const gridOptions = {
    defaultColDef: {
      sortable: true,
      unSortIcon: true
    },
    columnDefs: [
      {
        checkboxSelection: true,
        maxWidth: 60,
        sortable: false,
        unSortIcon: false,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true
      },
      // {
      //   headerName: 'ID',
      //   field: 'id',
      //   maxWidth: 180,
      //   cellRendererFramework: Clickable,
      //   cellClass: `cell-id text p3`
      // },
      {
        headerName: 'ID',
        field: 'ticketId',
        maxWidth: 180,
        cellRendererFramework: Clickable,
        cellClass: `cell-id text p3`
      },
      { headerName: 'Employer', field: 'employerId', maxWidth: 200 },
      {
        headerName: 'Issue',
        field: 'c',
        maxWidth: 500,
        cellRendererFramework: IssueSnippet
      },
      {
        headerName: 'Priority',
        field: 'ticketPriority',
        maxWidth: 130,
        cellRendererFramework: PriorityRenderer
      },
      { headerName: 'Type', field: 'ticketType', maxWidth: 120 },
      { headerName: 'Date', field: 'createdTs', maxWidth: 200 },
      {
        headerName: 'Assignee',
        field: 'assignee',
        maxWidth: 150,
        cellRendererFramework: AssigneeRenderer
      }
    ],
    rowHeight: 60
  };

  const refreshFunct = () => {
    window.location.reload();
  };

  let time = props.data.map((item, key) => {
    item.createdTs = moment(item.createdTs).format('L');
  });

  const { data } = props;
  console.log(data);
  
  return (
    <div className="ticket-table-wrapper">
      <div className="table-actions">
        <TicketAction
          icon={<ArrowClockwise />}
          tooltip="Refresh"
          onClick={refreshFunct}
        />
        <TicketAction icon={<Archive />} tooltip="Archive" />
        <TicketAction icon={<Share />} tooltip="E-mail" />
        <TicketAction icon={<Pencil />} tooltip="E-mail" />
      </div>
      <FilterBar />
      <AgGridTable
        gridOptions={gridOptions}
        rowHeight={80}
        rowData={data}
        pagination={true}
        paginationPageSize={6}
        rowClass="ticket-row"
      ></AgGridTable>
    </div>
  );
};

const PriorityRenderer = (props) => {
  const priority = props.data.ticketPriority;
  return <PriorityBadge priority={priority} />;
};

const AssigneeRenderer = (props) => {
  const { assignee } = props.data;

  return <UserIcon size="40" name={assignee} className="user-avatar" />;
};

const Clickable = (props) => {
  console.log(props.value);
  let k = props.value;
  return <a href={`http://localhost:3002/viewTicket/${k}`}>{props.value}</a>;
};

export default TicketTable;

This is the part with the problem.hough I try to pass cellRendererFramework: Clickable(id), it's not working

{
        headerName: 'ID',
        field: 'ticketId',
        maxWidth: 180,
        cellRendererFramework: Clickable,
        cellClass: `cell-id text p3`
      },

How can make an Automatic tests for Teradata

I am using SQL Teradata. My team and I are looking for a tool to automate testing. I'm not talking about a data quality test tool that I can do with a tool like Talend Data Quality.

I'm looking for a tool for the automation of tests for SQL Teradata.

Does someone have an idea?

thanks in advance,

Best regards, Slim
test cafe : removeRequestHook

So I use t.addRequestHooks to add a few requestMock

I have the impression that after the end on my test, the hook are still working.

Is there a way to remove all the requestMock in one line? or should I specify all the t.removeRequestHooks one by one?

How to test custom gradle plugin both with JUnit and manually in same sample project

My goal is to have this project setup:

example-gradle-plugin
├── build.gradle
└── src
    ├── main
    │   ├── java
    │   │   └── com ....
    └── test
        ├── java
        │   └── example
        │       └── integrationtest
        │           │ # GradleRunner.create().withProjectDir(testProjectPath.toFile()).withPluginClasspath()
        │           └── SimpleProjectRegressionTest.java // 
        └── resources
            └── simple
                │   # plugins { id "example-gradle-plugin" }
                ├── build.gradle 
                │   # // includeBuild ../../../../example-gradle-plugin
                └── settings.gradle

So the folder src/test/resources/simple is both used from a JUnit test, but as well can be used to run gradle commands from the command line using the composite build approach.

So this should work

cd src/test/resources/simple
gradle build

And this unit test should also work:


    @Test
    public void testBuildSample() {
        final ClassLoader classLoader = ProjectSetupHelper.class.getClassLoader();
        final Path sampleSourceRootPath = Paths.get(classLoader.getResource("simple").toURI());

        final BuildResult result = GradleRunner.create()
                .withProjectDir(sampleSourceRootPath.toFile())
                .withArguments("build")
                .withPluginClasspath()
                .build();
    }

However, there is a caveat when running JUnit, the custom-plugin-sources are referred to in 2 different ways at the same time:

GradleRunner.create().withProjectDir(testProjectPath.toFile()).withPluginClasspath() means to add project custom plugin files to the classpath for running the build during the unit test
In src/test/resources/simple/settings.gradle, the includeBuild ... command also refers to the custom plugin.

Is there an easier or cleaner way to achieve the above: Having a sample project with composite build that can be used from the commandline to verify local changes to the plugin, and using that sample project also in a unit test of the plugin?

Currently in the unit test I copy the sample folder to a temporary folder without settings.gradle to avoid such complications.

More than one test fails due to import after jest is torn down - Supertest Typescript and Express API
I am running into an issue where I am running multiple tests using supertest and jest. When there is only one test running then it works just fine but the second one throws the following error:
```
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
```
I tested this with two very simple tests:
```
describe("Default API", () => {
    describe("Default:", () => {
        it("should create a user in the DB", (done) => {
            request(app).get("/").expect(200, done);
        });
        it("should create a user in the DB", (done) => {
            request(app).get("/").expect(200, done);
        });
    });
});
```
They are the same but the second one throws the error. If I run only the first one there is no issue. This must be a setup issue Does anyone have advice. In my index.ts where I have the main express code I export app as follows:

export default app;

This is at the bottom of the index.ts file.
TypeError: Cannot read property 'getContext' of null
I have created a game using canvas API and now I am testing using Jest. But when running a test for a simple function it throws me this error. my script tag is at the end of the HTML and I also added this event listener to wait for the DOM document.addEventListener("DOMContentLoaded", init,false);

jest

PASS tests/sum.test.js FAIL tests/mod.test.js ● Test suite failed to run
```
TypeError: Cannot read property 'getContext' of null

  20 |   const empty = 0;
  21 |   const nextPieceCanvas = document.querySelector("canvas#nextPiece") as HTMLCanvasElement;
> 22 |   const NPctx = nextPieceCanvas.getContext("2d")! as CanvasRenderingContext2D;
     |                               ^
  23 |   
  24 |   //Gameboard Canvas
  25 |   const canvas = document.querySelector("canvas#tetris") as HTMLCanvasElement;

  at Object.<anonymous> (src/ts/app.ts:22:31)
  at Object.<anonymous> (tests/mod.test.js:2:1)
```
Test Suites: 1 failed, 1 passed, 2 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.424 s Ran all test suites. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! tetris_ts@1.0.0 test: jest npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the tetris_ts@1.0.0 test script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/alex/.npm/_logs/2021-02-26T22_46_02_771Z-debug.logenter code here

nestjs unit test createTestingModule Dependency Injection

I hope you can help me out. I am using Nx with latest angular/nestjs (date: February, 26)

    ...
    "@nestjs/common": "^7.0.0",
    "@nestjs/config": "^0.6.3",
    "@nestjs/core": "^7.0.0",
    "@nestjs/platform-express": "^7.0.0",
    "@nestjs/platform-socket.io": "^7.6.7",
    "@nestjs/websockets": "^7.6.7",
    "jest": "26.2.2",
    "@nrwl/jest": "11.4.0",
    ...

I cannot get my unit test running using NestJS with Jest I want to test following service:

@Injectable()
export class CoreApiService {
  logger = new Logger('CoreApiService');
  apiEndpoint;

  constructor(private httpService: HttpService, configService: ConfigService) {
    this.apiEndpoint = configService.get('API_SERVICE_ENDPOINT');
  }
}

and I get following error:

TypeError: Cannot read property 'get' of undefined

so it seems that the ConfigService (and also httpService) is always undefined.

when logging httpService and ConfigService, it will always be undefined. Even when I try to instantiate new Instances like new CoreApiService(new HttpService(), new ConfigService()) I've even tried things like new CoreApiService({} as any, {get: (...params} => {return 'foo'}) in the test itself

it will always be the same error mentioned above.

The test file:

import { Test, TestingModule } from '@nestjs/testing';
import { CoreApiService } from './core-api.service';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { HttpModule } from '@nestjs/common';


class ConfigServiceMock {
  get(key: string): string {
    switch (key) {
      case 'API_SERVICE_ENDPOINT':
        return '';
    }
  }
}

describe('CoreApiService', () => {
  let module: TestingModule;
  let service: CoreApiService;

  beforeEach(async () => {
    module = await Test.createTestingModule({
      imports: [HttpModule, ConfigModule],
      providers: [
        CoreApiService,
        { provide: ConfigService, useClass: ConfigServiceMock },
      ],
    }).compile();
    service = module.get<CoreApiService>(CoreApiService);
  });

  it('should be defined', () => {
    expect(service).toBeDefined();
  });
});

I've even tried: .overrideProvider(ConfigService).useClass(ConfigServiceMock)

Thank you in advance!

Button Copy to Clipboard window location href
I want to copy the current window.location.href onClick in the button, even if i set the right state i can not actually copy it, what is my problem?

Here the code
```
const [copyHref, setCopyHref] = useState(JSON.stringify(window.location.href));

  const copyToClipboard = () => {
    setCopyHref(copyHref)
    document.execCommand(copyHref);
    alert("Copied the text: " + copyHref);
  };

<Button onClick={copyToClipboard}/>
```
When i click i get the alert with the right url, but it does not actually copy it. How can i do that?
Launch Linux terminal from remote desktop from windows

I have below Usecase

anyway to launch Linux terminal (like putty, openssh) in remote desktop automatically if I put IP it should open RDP connection and then it should launch Linux terminal with inventory file we will mention.

script/command----->refer inventory file------>open common RDP session-----> launch Linux terminal with requested details(inventory/values while executing command/script).

any script or any alternate ways to achieve that.

please help thanks,

Regards, Samurai
How to change window border in Awesome WM?

So, I just want to change the ugly default window border in Awsome WM, How do I do ?

Thanks for the answer !

Hi,How to test Reactjs Project using @testing-libray/react

I am new to testing I am trying to do unit testing on a function that is present in the global context. Text and button are tested but I am not able to test the function (userDataFunc) and data is stored in userData, which are present in global context. Library that I have used (@testing-library/react)

Can any one help me out

Codesandbox link : Link

Dashboard Page

import React, { useContext, useEffect } from "react";
import { globalC } from "./context";

export default function Dashboard() {
  const {
    count,
    handleSubmit,
    incrementFunc,
    user,
    handleChange,
    userDataFunc,
    userData
  } = useContext(globalC);

  useEffect(() => {
    userDataFunc();
  });

  return (
    <div
      style={{ height: "100vh", backgroundColor: "#ea2345" }}
      className="d-flex justify-content-center align-items-center"
    >
      <div>
        <h4 style={{ color: "#fff" }}>Dashboard Page</h4>
        <form onSubmit={handleSubmit}>
          <input
            onChange={handleChange}
            className="form-control mb-1"
            name="username"
            type="text"
          />
          <button type="submit">submit</button>
        </form>
        <h4 style={{ color: "#fff", marginTop: "15px" }}>Increment</h4>

        <button onClick={incrementFunc}>clickme</button>
        <h5 style={{ color: "#fff" }}>{count}</h5>
        <h5 style={{ color: "#fff" }}>{user}</h5>
      </div>
      <div
        style={{
          overflowY: "auto",
          margin: "4px",
          border: "2px solid",
          padding: "12px",
          height: "80vh"
        }}
      >
        {userData !== undefined &&
          userData.map((i) => {
            return (
              <h5 key={i.id} style={{ color: "#fff" }}>
                {i.name}
              </h5>
            );
          })}
      </div>
    </div>
  );
}

Context Page

import React, { Component, createContext } from "react";
import axios from "axios";

export const globalC = createContext();

export class Gprov extends Component {
  state = {
    authLogin: null,
    authLoginerror: null,
    count: 1,
    user: null
  };
  componentDidMount() {}

  userDataFunc = async () => {
    await axios(`https://jsonplaceholder.typicode.com/users`)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            userData: res.data
          });
          // localStorage.setItem("loginDetail", JSON.stringify(res.data));
        }
      })
      .catch((err) =>
        this.setState({
          userDataerror: err
        })
      );
  };

  incrementFunc = () => {
    const { count } = this.state;
    this.setState({ count: count + 1 });
  };
  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      user: this.state.username
    });
  };
  render() {
    // console.log(localStorage.getItem("loginDetail"));
    return (
      <globalC.Provider
        value={{
          ...this.state,
          loginData: this.loginData,
          incrementFunc: this.incrementFunc,
          handleChange: this.handleChange,
          handleSubmit: this.handleSubmit,
          userDataFunc: this.userDataFunc
        }}
      >
        {this.props.children}
      </globalC.Provider>
    );
  }
}

Dashboard.test file

import React from "react";
import { Gprov } from "./context";
import { render, screen } from "@testing-library/react";
import Dashboard from "./Dashboard";

function initialFunc() {
  render(
    <Gprov>
      <Dashboard />
    </Gprov>
  );
}
describe("dashboard Component", () => {
  test("dashboard Component render without crash", () => {
    initialFunc();
  });
  test("dashboard title render without crash", () => {
    initialFunc();
    expect(screen.getByText("Dashboard Page")).toBeTruthy();
  });
});

Return array from jest mock with React Hook

I'm trying to create a mock for a custom hook that makes use of useEffect and use/createContext and ultimately just returns something that looks like this:

[{ users: 0, hoursTested: 0, testDrives: 0 }, null];

My code is as follow:

import React from "react";
import { render, screen } from "@testing-library/react";
import BetaResults from "./BetaResults";

var mockResults = [{ users: 0, hoursTested: 0, testDrives: 0 }, null];
jest.mock("services/EAPStats/useEAPStats", () => {
  console.log("In Mock");
  return jest.fn(() => {
    console.log("In jest.fn");
    console.log("mock results", mockResults);
    return mockResults;
  });
});
test("renders BetaResults", async () => {
  mockResults = [{ users: 10, hoursTested: 10, testDrives: 10 }, undefined];
  render(<BetaResults />);
  expect(screen.getAllByTestId("BetaResultsHeaderText").length).toEqual(1);
});

When I execute the test I receive this error:

Error: Uncaught [TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))]

Execution never reaches the function defined with jest.fn. What have I overlooked?

Jest setSystemTime not working with global scope

I am trying to tests a simple reducer which has a date property set to today.

const today = new Date();

export const initialState = {
  today
};

console.log(new Date().toDateString()); // <--- real date

export default function globalReducer(state = initialState, action) {
  console.log(new Date().toDateString()); // <--- mocked date
  switch (action.type) {
    default:
      return state;
  }
}

with my basic test

import globalReducer from "./reducer";

describe("Global reducer", () => {
  beforeAll(() => {
    jest.useFakeTimers("modern");
    jest.setSystemTime(new Date("2021-02-18"));
  });

  afterAll(() => {
    jest.useRealTimers();
  });

  it("should return the mocked date", () => {
    expect(globalReducer(undefined, {}).today).toEqual(new Date('2021-02-18'));
  });
});

What I noticed is that the mock only works inside the reducer code, but today in its global scope always returns the real date instead of the mocked one.

If I call the setSystemTime in the test setup file, then today is correctly mocked.

Am I missing something here? What would be the way of mocking a date in global scope only for a specific test?

A test repo is here if you want to check it out https://github.com/dariospadoni/jestFakeTimersMock

Related questions

React testing library setting window=undefined

See also questions close to this topic