Create-react-app: test not actually using jest-environment-jsdom-fourteen

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

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

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

[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

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

[ilovett]

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