0.26.2 to 0.27.0 causes node 10 to fail #625

ghost · 2021-03-02T14:59:53Z

I got a setup checking both node 10, 12 and 14

The newest version keeps failing on node 10 but not the other node version.

I hope it's okay that I provide a link to the github action that fails - since it will have much more details than I can provide:

https://github.com/Norfeldt/react-kitchen-sink/pull/113/checks?check_run_id=2007437692

yarn run v1.22.5
$ react-scripts test --watchAll=false --coverage
FAIL src/components/SearchBox/index.test.jsx (5.78 s)
  ● Console

    console.warn
      [MSW] Found a redundant usage of query parameters in the request handler URL for "GET https://api.flickr.com/services/rest/?method=flickr.photos.search". Please match against a path instead, and access query parameters in the response resolver function:
      
      rest.get("/services/rest/", (req, res, ctx) => {
        const query = req.url.searchParams
        const method = query.get("method")
      })

       9 | 
      10 | const fakeServer = setupServer(
    > 11 |   rest.get('https://api.flickr.com/services/rest/?method=flickr.photos.search', (req, res, ctx) =>
         |        ^
      12 |     res(ctx.status(200), ctx.json({ photos: { photo: [1, 2, 3] } }))
      13 |   )
      14 | )

      at RestHandler.checkRedundantQueryParameters (node_modules/msw/lib/umd/index.js:6688:23)
      at new RestHandler (node_modules/msw/lib/umd/index.js:6678:16)
      at Object.get (node_modules/msw/lib/umd/index.js:7716:18)
      at Object.<anonymous> (src/components/SearchBox/index.test.jsx:11:8)

  ● it calls Flickr REST request when submitting search term and clears search field

    Network Error

      at createError (node_modules/axios/lib/core/createError.js:16:15)
      at XMLHttpRequestOverride.handleError [as onerror] (node_modules/axios/lib/adapters/xhr.js:84:14)
      at XMLHttpRequestOverride.trigger (node_modules/node-request-interceptor/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts:160:23)
      at node_modules/node-request-interceptor/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts:259:18

  ● it calls Flickr REST request when submitting search term and clears search field

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: [1, 2, 3]

    Number of calls: 0

    <html>
      <head />
      <body>
        <div>
          <section
            class="container"
          >
            <form
              action="none"
            >
              <input
                aria-label="Search Flickr"
                placeholder="What are you looking for?"
                value="Finding Walley"
              />
              <button
                aria-label="Submit search"
                type="submit"
              >
                <svg
                  height="1em"
                  viewBox="0 0 46 46"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g
                    fill="currentColor"
                    fill-rule="evenodd"
                  >
                    <path
                      d="M14.6 28.6c-3.8 0-7.4-1.5-10.1-4.2C1.8 21.7.3 18.1.3 14.3S1.8 6.9 4.5 4.2C7.2 1.5 10.8 0 14.6 0S22 1.5 24.7 4.2c2.7 2.7 4.2 6.3 4.2 10.1s-1.5 7.4-4.2 10.1c-2.7 2.7-6.3 4.2-10.1 4.2zm0-26.5c-3.3 0-6.4 1.3-8.7 3.6-2.3 2.3-3.6 5.4-3.6 8.7 0 3.3 1.3 6.4 3.6 8.7 2.3 2.3 5.4 3.6 8.7 3.6 3.3 0 6.4-1.3 8.7-3.6 2.3-2.3 3.6-5.4 3.6-8.7 0-3.3-1.3-6.4-3.6-8.7-2.3-2.3-5.5-3.6-8.7-3.6zM39.7 45.9c-.5 0-1-.2-1.4-.6L26.1 33.1c-.8-.8-.8-2 0-2.8l4.4-4.4c.8-.8 2.1-.8 2.8 0L45.6 38c.8.8.8 2 0 2.8l-4.4 4.4c-.5.5-1 .7-1.5.7zM32 27.3l-4.4 4.4 12.2 12.2 4.4-4.4L32 27.3z"
                      fill-rule="nonzero"
                    />
                    <path
                      d="M24.654 23.443l4.95 4.95-1.414 1.414-4.95-4.95z"
                    />
                  </g>
                </svg>
              </button>
            </form>
          </section>
        </div>
      </body>
    </html>

      42 | 
      43 |   await waitFor(() => {
    > 44 |     expect(fakeSetPhotos).toHaveBeenCalledWith([1, 2, 3])
         |                           ^
      45 |     expect(inputField.value).toBe('')
      46 |   })
      47 | })

      at src/components/SearchBox/index.test.jsx:44:27
      at runWithExpensiveErrorDiagnosticsDisabled (node_modules/@testing-library/dom/dist/config.js:51:12)
      at checkCallback (node_modules/@testing-library/dom/dist/wait-for.js:127:77)
      at checkRealTimersCallback (node_modules/@testing-library/dom/dist/wait-for.js:119:16)
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:391:19)

import React from 'react'
import { render, fireEvent, waitFor, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { rest } from 'msw'
import { setupServer } from 'msw/node'

import SearchBox from '.'
import { act } from 'react-dom/test-utils'

const fakeServer = setupServer(
  rest.get('https://api.flickr.com/services/rest/?method=flickr.photos.search', (req, res, ctx) =>
    res(ctx.status(200), ctx.json({ photos: { photo: [1, 2, 3] } }))
  )
)

beforeAll(() => fakeServer.listen())
afterEach(() => fakeServer.resetHandlers())
afterAll(() => fakeServer.close())

test('an input field with a placeholder', () => {
  const { getByLabelText, getByPlaceholderText } = render(<SearchBox />)

  expect(getByLabelText('Search Flickr')).toBeInTheDocument()
  expect(getByPlaceholderText('What are you looking for?')).toBeInTheDocument()
})

test('a submit search term button appearance', () => {
  const { getByLabelText } = render(<SearchBox />)

  expect(getByLabelText('Submit search')).toBeInTheDocument()
})

test('it calls Flickr REST request when submitting search term and clears search field', async () => {
  const fakeSetPhotos = jest.fn(() => {})
  const { getByRole } = render(<SearchBox setPhotos={fakeSetPhotos} />)

  const inputField = getByRole('textbox', { name: /search flickr/i })
  const submitButton = getByRole('button', { name: /submit search/i })

  userEvent.type(inputField, 'Finding Walley')
  fireEvent.click(submitButton)

  await waitFor(() => {
    expect(fakeSetPhotos).toHaveBeenCalledWith([1, 2, 3])
    expect(inputField.value).toBe('')
  })
})
test('does not try to fetch if search term is empty', () => {
  const { getByRole } = render(<SearchBox setPhotos={() => {}} />)
  const inputField = getByRole('textbox', { name: /search flickr/i })
  const submitButton = getByRole('button', { name: /submit search/i })

  expect(inputField.value).toEqual('')
  // fireEvent.click(submitButton)

  // TODO: finish up this one
})

dagadbm · 2021-03-02T19:39:48Z

I had a similar problem and the error was with the Object.fromEntries() function. I just updated my node to be 12+ and it worked.

dagadbm · 2021-03-02T19:40:43Z

Would be nice on the documentation to add the minimum requirements for msw to run on node (and browser while you are at it)

ghost · 2021-03-04T08:18:25Z

@dagadbm thank you for telling me this. I'm guessing that they would like to support node 10 and it's just a matter of transpiling it.

kettanaito · 2021-03-04T13:22:46Z

Thank you for reporting this. It looks like the build of @mswjs/cookies package is compiled to include Object.fromEntries. That package propagates to the msw/node build and causes the aforementioned exception when run in node@10.

TypeError: Object.fromEntries is not a function
    at setRequestCookies (/Users/kettanaito/Projects/contrib/msw-node-10/node_modules/msw/node/lib/index.js:7248:91)

function setRequestCookies(request) {
    var _a;
    lib$1.store.hydrate();
    request.cookies = Object.assign(Object.assign({}, getRequestCookies(request)), Object.fromEntries(Array.from((_a = lib$1.store.get(Object.assign(Object.assign({}, request), { url: request.url.toString() }))) === null || _a === void 0 ? void 0 : _a.entries()).map(([name, { value }]) => [name, value])));
    request.headers.set('cookie', Object.entries(request.cookies)
        .map(([name, value]) => `${name}=${value}`)
        .join('; '));
}

I suspect the culprit to be the tsconfig.json and the libs we use there:

https://github.com/mswjs/cookies/blob/f4edfc2a96077b7f7901177560586b84c2ba0188/tsconfig.json#L2-L10

Perhaps the es2017 lib includes Object.fromEntries and thus TypeScript doesn't transpile it?

We're developing the library against v12.18.0, which you can find in the .nvmrc file. I agree that's not the way to propagate the necessary Node.js version. We can set the "engines" property in package.json if that'd help. It'd be hard to demand a specific Node.js version since the library can be used for browser only. Then it matters not what Node.js version your project has as you're not using MSW Node API (setupServer).

Would somebody be interested in making a pull request to @mswjs/cookies and reconfigure the build so it transpiles es2017 features?

chrisguttandin · 2021-03-04T15:38:40Z

I had a quick look at the cookies package. Apparently it doesn't make use of Object.fromEntries(). It looks like it's used inside msw instead.

msw/src/utils/request/setRequestCookies.ts

Line 9 in 10cccc0

...Object.fromEntries(

kettanaito · 2021-03-04T18:50:58Z

@chrisguttandin the source code of the cookies package gets compiled, but it looks like Object.fromEntries remains. It may have something to do with what build target we set or which libs we use. MSW required the cookie package at runtime, thus the error.

ghost added bug Something isn't working scope:node Related to MSW running in Node labels Mar 2, 2021

kettanaito added the help wanted Extra attention is needed label Mar 4, 2021

chrisguttandin mentioned this issue Mar 4, 2021

Replace Object.fromEntries() #633

Merged

kettanaito assigned chrisguttandin Mar 4, 2021

kettanaito closed this as completed in #633 Mar 6, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

0.26.2 to 0.27.0 causes node 10 to fail #625

0.26.2 to 0.27.0 causes node 10 to fail #625

ghost commented Mar 2, 2021 •

edited by ghost

dagadbm commented Mar 2, 2021

dagadbm commented Mar 2, 2021

ghost commented Mar 4, 2021

kettanaito commented Mar 4, 2021 •

edited

chrisguttandin commented Mar 4, 2021

kettanaito commented Mar 4, 2021

0.26.2 to 0.27.0 causes node 10 to fail #625

0.26.2 to 0.27.0 causes node 10 to fail #625

Comments

ghost commented Mar 2, 2021 • edited by ghost

dagadbm commented Mar 2, 2021

dagadbm commented Mar 2, 2021

ghost commented Mar 4, 2021

kettanaito commented Mar 4, 2021 • edited

chrisguttandin commented Mar 4, 2021

kettanaito commented Mar 4, 2021

ghost commented Mar 2, 2021 •

edited by ghost

kettanaito commented Mar 4, 2021 •

edited