Skip to content

https://testing-library.com/s/screen-global-error page gives 404 #700

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
RaviH opened this issue Jul 15, 2020 · 10 comments
Closed

https://testing-library.com/s/screen-global-error page gives 404 #700

RaviH opened this issue Jul 15, 2020 · 10 comments
Labels
bug Something isn't working documentation An update needs to be made to documentation help wanted Extra attention is needed

Comments

@RaviH
Copy link

RaviH commented Jul 15, 2020

I am getting this error when trying to screen2.debug(screen2.getAllByText(/edit/i));

 1) TypeError: For queries bound to document.body a global document has
      to be available... Learn more:
      https://testing-library.com/s/screen-global-error

For reference my code:

import { Selector, t } from 'testcafe';
import { screen } from '@testing-library/testcafe';
import { screen as screen2 } from '@testing-library/dom';

const emailInput = screen.getByRole('textbox', { name: /email/i });
const passwordInput = screen.getByPlaceholderText(/password/i);
export const editTaskButtons = screen.queryAllByText(/edit/i);
export const editTaskButtons2 = screen.getAllByText(/edit/i);
export const emailErrorMessage = Selector('div')
  .child('.q-field__messages')
  .child('div')
  .withText('Please enter a valid email address.');
export const loginButton = Selector('#loginButton');
export const logoutButton = Selector('#logoutButton');

export async function clickOnEdit(number) {
  screen2.debug(screen2.getAllByText(/edit/i));
  const editTaskButton = editTaskButtons[number];
  const editTaskButton1 = editTaskButtons2[number];
  const editTaskButton2 = screen.findAllByTestId(/editBtn/i);
  await t.click(editTaskButton);
}
@nickserv nickserv added bug Something isn't working documentation An update needs to be made to documentation labels Aug 25, 2020
@nickserv
Copy link
Member

nickserv commented Aug 29, 2020 •
edited
Loading

@kentcdodds @jkdowdle Do you know what page this is supposed to go to?

@RaviH Also how are you running this (if you haven't fixed the bug yet, I'll keep this issue open for the 404)?

@kentcdodds
Copy link
Member

Oh, whoops. I think I meant to add a redirect for that URL. It's supposed to go to some documentation that explains that the screen export can only be used with a global browser environment (like a global document). I'm not sure if that page was ever made or if it would simply be sufficient to redirect it to the screen documentation and have a special note about that.

@nickserv
Copy link
Member

I searched and couldn't find a reference to it. Would you prefer to make a new page or add a note?

@kentcdodds
Copy link
Member

I think it would make most sense as a note. But anyone can feel free to do whatever they'd like with that. I don't think that we can make a wrong choice here.

@nickserv
Copy link
Member

What would be documented? Jest/JSDOM setup?

@kentcdodds
Copy link
Member

I think all that we would really need is an explanation that if you're not using a global DOM environment then you can't use screen. Most people will understand because they're typically going against the grain by not testing with a global DOM environment.

@bzalasky
Copy link

bzalasky commented Sep 14, 2020 •
edited
Loading

I was able to resolve this error by updating the HTML file I'm using with my Mocha test runner to move the <script> tag loading the JS below my <body> tag. Adding something to this effect in the docs would be useful (assuming I didn't miss it somewhere).

<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Old position of my script tag w/ the error --> 
    <!-- <script src="/https/github.com/javascripts/spec.js"></script> -->
  </head>
  <body></body>
  <!-- New position of my script tag, working as expected --> 
  <script src="/https/github.com/javascripts/spec.js"></script>
</html>

@nickserv nickserv added the help wanted Extra attention is needed label Oct 7, 2020
@MatanBobi
Copy link
Member

@kentcdodds @nickmccurdy We've added a redirect rule for this one a couple of months ago though it doesn't reference to any particular note about global browser environment, it just redirects to the screen documentation.
Do you think we should add a note there?

mathiassoeholm added a commit to mathiassoeholm/testing-library-docs that referenced this issue Dec 19, 2020
@mathiassoeholm
Add note about needing global DOM environment to use screen, fixes: t…
e13ccab 
…esting-library/dom-testing-library#700
@mathiassoeholm mathiassoeholm mentioned this issue Dec 19, 2020
Merged
@eps1lon
Copy link
Member

eps1lon commented Dec 21, 2020

Resolved with testing-library/testing-library-docs#723

Note

You need a global DOM environment to use screen. If you're using jest, with
the
testEnvironment
set to jsdom, a global DOM environment will be available for you.

If you're loading your test with a script tag, make sure it comes after the
body. An example can be seen
here.

-- https://testing-library.com/docs/dom-testing-library/api-queries/#screen

@eps1lon eps1lon closed this as completed Dec 21, 2020
@skynavga
Copy link 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body></body>
  <script src="/https/github.com/javascripts/spec.js"></script>
</html>

BTW, this content is not valid per the HTML5 specification. script must be inside head or body. Using the above recommended placement (of script) is essentially UB (undefined behavior). If it just happens to work on some browser, doesn't mean it will work on another.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working documentation An update needs to be made to documentation help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@RaviH @skynavga @bzalasky @nickserv @kentcdodds @eps1lon @MatanBobi