Testing React Projects
We'll start from the end of the regular JavaScript project setup.
Your setup so far should look like this:
Here's package.json content used for React projects:
{
"devDependencies": {
"hs-test-web": "https://github.com/hyperskill/hs-test-web/archive/release.tar.gz",
"hs-test-web-server": "https://github.com/hyperskill/hs-test-web-server/archive/release.tar.gz"
},
"peerDependencies": {
"jest": ">=24.9.0",
"@types/jest": ">=24.9.0",
"puppeteer": ">=2.0.0",
"react": ">=16.13.1",
"react-dom": ">=16.13.1"
},
"scripts": {
"start": "node node_modules/hs-test-web-server/start.js"
}
}
Note: currently, here's a list of all the dependencies besides jest and puppeteer that is installed for testing React applications on Hyperskill. You shouldn't use other dependencies if you are writing tests to be graded in web interface. Contact Hyperksill so we can add other useful dependencies.
You should add an initial template for the user, so they can start developing the application right away. The initial template should be written in React and can be run without any compilation errors. A React's official initial template will work just fine. You can download this template from here.
Now your setup may look like follows:
If you see the addition (excluded) near your files, you should right-click on the file and select Course Creator -> Include into Task
Note: On Hyperskill's web interface, only a single file can be shown, so you should mark files that users shouldn't change as hidden. Normally, in a regular project, only tests are hidden but keeping in mind that users should solve this problem via web interface you should leave only one file as visible. So, tests and all files except one JSX file should be hidden. This implies that all the hidden files should already contain proper code. You can hide files right-clicking and selecting Course Creator -> Hide from Learner
Also, as you might know, React uses a single html template and fills it with all the necessary data during compilation. You should also create such file. It should be located in the public folder in the root of the Web Storm project, near the package.json file. Name this file index.html
All fill it with the following content (don't change it if you are developing code problems based on React that is meant to be tested via Hyperskill's web interface):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
Testing a React application is not much different from testing a regular javascript application. But there are a few small differences.
You have to extend ReactTest class that can build and run React application:
const {ReactTest, correct, wrong} = require('hs-test-web');
class MinesweeperTest extends ReactTest {
page = this.getPage('http://localhost:31328')
tests = [
this.page.execute(async () => {
if (document.getElementById('root').textContent === "Minesweeper is loading...") {
return correct();
} else {
return wrong("There should be a text 'Minesweeper is loading...' ");
}
}
)
]
}
jest.setTimeout(30000);
test("Test stage", async () => {
await new Test().runTests()
});As React code requires compilation before running in a web browser tests should be slightly adjusted and not use file://... syntax to open html files as with regular web projects. Instead, use host + port URL. By default react application is run on the http://localhost:31328 URL.
To change the default port you need to override the port field in the test class:
class MinesweeperTest extends ReactTest {
port = 41567
...
}