test not actually using jest-environment-jsdom-fourteen

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.

[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",

[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.