test not actually using jest-environment-jsdom-fourteen
See original GitHub issueDescribe 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
- npx create-react-app jest-testenv-app
- cd jest-testenv-app
- 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.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:4
- Comments:5 (1 by maintainers)
A temporary work-around may be:
npm test -- --showConfig
now shows: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.