Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #7491
Closed
Open
Issue created 5 years ago by Administrator@rootContributor
  • New related issue

  • Report abuse to administrator

  • New related issue

  • Report abuse to administrator

test not actually using jest-environment-jsdom-fourteen

Closed

test not actually using jest-environment-jsdom-fourteen

Created by: TLadd

Describe the bug

Although createJestConfig sets the testEnvironment to jest-environment-jsdom-fourteen, it doesn't actually end up making its what into Jest. If you create a new project with create-react-app and run yarn test --showConfig, you will get output similar to:

"testEnvironment": "/Users/thomasladd/github/jest-testenv-app/node_modules/jest-environment-jsdom/build/index.js",

The testEnvironment ends up still using jest-environment-jsdom instead of jest-environment-jsdom-fourteen.

Did you try recovering your dependencies?

Yes, created a brand new project.

Which terms did you search for in User Guide?

jest-environment-jsdom-fourteen

Environment

Environment: OS: macOS 10.14 Node: 10.15.0 Yarn: 1.17.3 npm: 6.9.0 Watchman: 4.9.0 Xcode: Xcode 10.1 Build version 10B61 Android Studio: Not Found

Packages: (wanted => installed) react: ^16.8.6 => 16.8.6 react-dom: ^16.8.6 => 16.8.6 react-scripts: 3.0.1 => 3.0.1

Steps to reproduce

  1. npx create-react-app jest-testenv-app
  2. cd jest-testenv-app
  3. yarn test --showConfig

Expected behavior

jest-environment-jsdom-fourteen should be used when running yarn test.

Actual behavior

jest-environment-jsdom is used.

Reproducible demo

I created this project using create-react-app that demonstrates the issue: https://github.com/TLadd/jest-testenv-app. Again, if you go into a newly created project and run yarn test --showConfig, you can observe that the testEnvironment is not set correctly.

I also added two tests that demonstrate that the older version of jsdom is being used:

App.js

import React from "react";
import "./App.css";

function App({ onSubmit }) {
  return (
    <div className="App">
      <form onSubmit={onSubmit}>
        <button data-testid="submit-button" type="submit">
          <span data-testid="submit-button-span">Submit Button</span>
        </button>
      </form>
    </div>
  );
}

export default App;

App.test.js

// Passes
it("calls onSubmit when the button is clicked", () => {
  const onSubmit = jest.fn();
  const { getByTestId } = render(<App onSubmit={onSubmit} />);

  fireEvent.click(getByTestId("submit-button"));

  expect(onSubmit).toHaveBeenCalled();
});

// Fails
it("calls onSubmit when the span inside the button is clicked", () => {
  const onSubmit = jest.fn();
  const { getByTestId } = render(<App onSubmit={onSubmit} />);

  fireEvent.click(getByTestId("submit-button-span"));

  expect(onSubmit).toHaveBeenCalled();
});

It's taking advantage of a known bug in the older jsdom that has since been fixed. When clicking a span inside a submit button, it doesn't trigger the form to submit.

So by default, the first test passes and the second on fails. If I go into node_modules/react-scripts/scripts/test.js and manually set this line

const testEnvironment =  "/Users/thomasladd/github/jest-testenv-app/node_modules/jest-environment-jsdom-fourteen/lib/index.js";

Then both tests pass.

  1. Oh no!

    You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.

    Incoming!

    Drop your designs to start your upload.
Tasks
0

No tasks are currently assigned. Use tasks to break down this issue into smaller parts.

Linked items
0

Link issues together to show that they're related. Learn more.

Activity


  • Administrator
    Administrator @root · 5 years ago
    Author Contributor

    Created by: dorschs57

    I'm also seeing this issue, and attempting to set it my self with "testEnvironment": "jest-environment-jsdom-fourteen" in my package.json results in

    These options in your package.json Jest configuration are not currently supported by Create React App:

    • testEnvironment

    I'm running react-scripts 3.0.1 as well.

  • Administrator
    Administrator @root · 5 years ago
    Author Contributor

    Created by: sfbwalder

    A temporary work-around may be:

    //package.json
    "test": "react-scripts test --env=jsdom-fourteen"

    npm test -- --showConfig now shows:

    "testEnvironment": "/Users/user/dev/project/node_modules/jest-environment-jsdom-fourteen/lib/index.js",
  • Administrator
    Administrator @root · 5 years ago
    Author Contributor

    Created by: dorschs57

    A temporary work-around may be:

    //package.json
    "test": "react-scripts test --env=jsdom-fourteen"

    npm test -- --showConfig now shows:

    "testEnvironment": "/Users/user/dev/project/node_modules/jest-environment-jsdom-fourteen/lib/index.js",

    --env=jsdom-fifteen worked for me. Thanks

  • Administrator
    Administrator @root · 5 years ago
    Author Contributor

    Created by: ianschmitz

    Doh. Thanks for reporting. Unfortunately this will likely have to wait until the next major release so we don't break people's tests by switching now. The workaround provided by @sfbwalder should work well. There's also jest-environment-jsdom-fifteen available for those that care to use the latest.

  • Administrator
    Administrator @root · 5 years ago
    Author Contributor

    Created by: ilovett

    thanks @sfbwalder although not so temporary :joy: -- this issue ate up at least a day for me -- react-scripts test --env=jsdom-fourteen worked

Please register or sign in to reply
0 Assignees
None
Assign to
Labels
1
issue: bug
1
issue: bug
    Assign labels
  • Manage project labels

Milestone
4.0
4.0
Due date
None
None
None
Time tracking
No estimate or time spent
Confidentiality
Not confidential
Not confidential

You are going to turn on confidentiality. Only project members with at least the Reporter role, the author, and assignees can view or be notified about this issue.

Lock issue
Unlocked
1
1 participant
Administrator
Reference: facebook/create-react-app#7491

Menu

Explore Projects Groups Snippets