Skip to content

Use React Testing Library instead of Enzyme for tests #1477

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.

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

Merged
merged 4 commits into from
Jul 6, 2020

Conversation

andrewn
Copy link
Member

@andrewn andrewn commented Jun 28, 2020

Fixes #1432.

This replaces enzyme with React Testing Library.

The server and client code is run as separate Jest projects which means:

  • server code uses the node.js Jest environment
  • server tests are configured via server/jest.setup.js
  • client code uses the jsdom Jest environment (emulating a browser)
  • client test are configured via client/jest.setup.js

I've ported the Toolbar, Nav and FileNode tests to use React Testing Library. By design, it forces a focus on how a user will interact with components. e.g. selecting buttons by text content or associated .

I've also flattened the nested describe blocks as I found it difficult to follow the flow of tests.

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
  • is descriptively named and links to an issue number, i.e. Fixes #123

andrewn added 2 commits June 28, 2020 15:44
- server tests now use the "node" jest environment, removing the
  mongoose warning
- both projects can use their own jest.setup.js file
@andrewn andrewn requested a review from catarak June 28, 2020 14:12
package.json Outdated
@@ -13,6 +13,9 @@
"build:server": "cross-env NODE_ENV=production webpack --config webpack/config.server.js",
"build:examples": "cross-env NODE_ENV=production webpack --config webpack/config.examples.js",
"test": "jest",
"xxtest": "npm run test:server && npm run test:client",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the old command to run the tests? Should this be removed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, thanks so much for spotting them! This was an experiment before I found out about Jest projects.

I've removed them!

@catarak
Copy link
Member

catarak commented Jun 30, 2020

This looks great to me! I do really like the switch from testing the internal props/state to the UI itself.

@catarak catarak merged commit 6f1ac99 into processing:develop Jul 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Investigate replacing Enzyme with React Testing Library
2 participants