In one of my last blog posts, I explained how to set up a basic TypeScript project. In this article, I would like to explain how to add React and Tests to a TypeScript project. We will achieve this in a way that the react parts are in the same structure as the rest of our TypeScript.
At the end of this post, you can find a “Summary” section where I list all the commands we executed and the configuration files we created. To have a quicker start and skip all the explanations you could directly go there.
You can find the project with all the configuration on GitHub.
A valid scenario to add a react app to your project could be some configuration page or stand alone application which should be shown within dataverse. For example from a menu entry within a Model-Driven App.
The objective of this blog post is to show how one could add tests and most important an react app to a TypeScript project that is already in place.
This includes the following parts
As in every other language, tests are important when one is developing TypeScript. There are different types of tests (unit tests, integration tests, UI tests, …). In this blog post we will see how to add the possibility for unit tests with jest.
I would like to be clear on the delimitation. I will not talk about mocking frameworks. There are different frameworks out there (all created by the community). For example:
In the package.json file we add the following script to be able to run a build watch. When executed the system will look at any change of the code and immediately builds the code when a change is detected.
This file should be created in the “css” folder in “Webresources” and contain the following code.
Next step would be to add a new entry point to your webpack.config.shared.js file. To do so we add the following row in the “entry” object.
If you now run the build script
npm run build
the project should create a file, reactdemo.js, in the “Webresources/js” folder.
If you then deploy all 3 files (Webresources/js/reactdemo.js, Webresources/html/reactdemo.html,Webresources/css/reactdemo.css) to your Dataverse environment and add the HTML-file as a menu entry in an Model-Driven App you should see something like the following.
Congratulations! You just created and depoyed your first React app to Dataverse.
Add Test – Jest
The second part of “add React and Tests to a TypeScript project” is to add the possibility to write tests for your TypeScript code. We will use Jest to do so.
As we did before we will install the packages via the terminal within Visual Studio code.
First we have to install jest. It’s the core package of jest.
npm install --save-dev jest
The second package would be ts-jest. It provides jest with the possibility to process ts files.
npm install --save-dev ts-jest
The last package is @types/jest. It provides type definitions for jest.
npm install --save-dev @types/jest
As we did before we have to change some configurations to include our jest packages.
Here we have to change the include to include everything under the src folder
In the package.json file we add two more scripts:
test – to run all tests
test-watch – to watch on any file change and run tests if one is detected
It might be that “test” already exists. In that case it should be changed to the code you see below.
"test-watch": "jest --watch",
The last step would be to create a new file “jest.config.js” in the “ts” folder. This file will configure the behavior of jest.
within the terminal of VS Code jest should run and execute all tests (which is only one).
In this blog post you learned how to add React and Tests to a TypeScript project.
As you can see it is quite easy to add both a react app as well as tests to an existing project.
It is possible to add several react apps and structure them in an understandable way as well.
The shown set up (both articles together) are still rather basic. One could add a lot more like custom typing (early bound), automated deployment, mocking, Fluent Ui, optimization (for example tree shaking), and a lot more.
I hope this article helped you. Feel free to contact me if you have any questions. I am always happy to help.
In this chapter you can find all the commands and files to execute/create/modify. The intention is to give a very short quick start guide without any explanation.
Open the project folder with VS Code, cd into the ts folder with the Terminal within VS Code and execute the following commands.
This is just 1 of 52 articles. You can browse through all of them by going to the main page. Another possibility is to view the categories page to find more related content. You can also subscribe and get new blog posts emailed to you directly.
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.