TinyFrontend Newsletter

Share this post

EP01: Jest, Npm, Shell.js

tinyfrontend.substack.com

EP01: Jest, Npm, Shell.js

10 Minutes Read / 3 Topics

Jin Lei
Mar 17, 2023
Share
Share this post

EP01: Jest, Npm, Shell.js

tinyfrontend.substack.com

We have 3 topics in this episode, which takes about 10 minutes to read!

  1. How to Mock a React Component in Jest

  2. NPM Package Lifecycle Events

  3. Trigger Shell Commands using Shell.js


Download Printable PDF: A4 / A5


01. How to Mock a React Component in Jest

Mocking a React component in Jest involves creating a fake version of the component for testing purposes. This is useful when you want to isolate the component's behavior from other components or when you want to test a component that relies on other components or modules.

Example

Let’s try to test the handleLoginExpired function when the user login status got expired

Cause we can’t control the internal onLoginExpired trigger logic, the handleLoginExpired might be a dead zone during testing.

jest.mock syntax

Here we use jest.mock function to create a mock version of the PaymentModule component.

The jest.mock function takes two arguments:

  1. Path: path to the module you want to mock (in this case, @awsome/payment-moudle)

  2. Mock Body: a function that returns a new version of the module.

Mock the Component

In this case, we are returning a new module implementation which will trigger the onLoginExpired callback immediately when the module is rendered.


02. NPM Package Lifecycle Events

NPM (Node Package Manager) has a set of lifecycle events that are triggered at specific points during the installation and use of an NPM package. These events are specified in the package.json file of the package and are executed in a predefined order.

Here is a list of the NPM package lifecycle events, in the order they are executed:

Dependencies Installation

  1. preinstall: This event is triggered before the package is installed.

  2. install: This event is triggered during the package installation process.

  3. postinstall: This event is triggered after the package is installed.

Dependencies Uninstallation

  1. preuninstall: This event is triggered before the package is uninstalled.

  2. uninstall: This event is triggered during the package uninstallation process.

  3. postuninstall: This event is triggered after the package is uninstalled.

Package Publish

  1. prepublish: This event is triggered before the package is published.

  2. publish: This event is triggered when the package is published.

  3. postpublish: This event is triggered after the package is published.

Others

In addition to these events, there are also some less commonly used events, such as:

  • prepare

  • pretest, test, posttest,

  • prestart, start, poststart

  • prestop, stop, poststop

which are used for specific purposes in the package development and deployment process.


03. Trigger Shell Commands using Shell.js

Shell.js is a Node.js library that provides a simple and consistent API for running shell commands on different operating systems. Here's an example of how to use Shell.js to trigger shell commands:

Additionally, Shell.js provides several other functions for running shell commands.

For more information on how to use Shell.js, you can refer to its official documentation.

Share
Share this post

EP01: Jest, Npm, Shell.js

tinyfrontend.substack.com
Next
Comments
Top
New

No posts

Ready for more?

© 2023 Jin Lei
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing