Sabio React Testing

Node module for testing React for Sabio students

Installation Instructions

React App

• For this package, the dependency s.starterapptests exists in the repositories. This is included in React-start-here, React-componentize, and React-routing
• In order for the tests to run properly, ensure the following node modules are installed:

@babel/plugin-syntax-jsx
@wojtekmaj/enzyme-adapter-react-17
enzyme
enzyme-to-json
jest-html-reporter

Package.json scripts

• Ensure the following "scripts" are inside package.json:

"copy-test": "copy-test",
"test-forms-assessment": "set CI=true &&react-scripts test -i src/__tests__/_assessments/React-Form-1.test.js --env=jsdom --testResultsProcessor=./node_modules/jest-html-reporter"
"compile-test": "react-scripts test -i src/__tests__/_assessments/React-Form-1.test.js --watchAll=false --json > src/__tests__/results.json &",
"submit-test": "submit-test"

• copy-test copies the tests from the node module into the src/__tests__ directory. By default, this is hidden from the students.
• test-basics will run the test and generate a new html report in test-report. They can open this html document in live server. Students will need to run this script every time to get a new update on their bugs.
• compile-test exports the current results of the jest and write it to a new file, located at src/__tests__/results.json. This should be run only when preparing to submit. By default this will be hidden from the students.
• submit-test submits the test to our database. Students will need to have their git username setup in order for this to work.

Babel config file

• A file should exist in the root directory named babel.config.js. If it does not, ensure it exists. It may be hidden from the students in VS Code.
• The file should contain the following:

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
};

Testing module (for development purposes only)

• In the directory of the node module, run yarn link in the terminal. Should receive a success as an output in terminal.

• In the directory of the react app, run yarn link s.starterapptests in the terminal. A link will be created and the packgage will be installed in the node_modules directory. As you edit the node module, the module in the react app will update in real time.

• In react app, run yarn run react-test to start module.