Get a head start on next year by taking notes and writing a test series as you go along.

The test target is a React application written in Typescript. The test framework is Jest. Let’s start with configuration.

The installation

Run the following command line installation in the repository:

npm i --save-dev typescript jest @types/jest ts-jest
Copy the code

Note that at the time of writing jest is available in version 27, but TS-Jest and @types/ Jest do not yet support 27, so you may need to install 26 to avoid some strange issues:

NPM I --save-dev typescript jest@^26.6.3 @types/jest ts-jestCopy the code

Configuration Typescript

After installation, create a tsconfig.json file next to package.json to configure Typescript. Such as:

{
  "compilerOptions": {
    "module": "es2020"."moduleResolution": "node"."target": "es5"."jsx": "react",},"include": ["src"]}Copy the code

Note that:

  • includeThe path to the test file must be included, or it will not be parsed. I personally like to put the test directly insrc/Next to the source file, so only configuredsrc/Folder.
  • moduleResolutionMust benodeBecause Jest is running on NodeJS.
  • The general use of packaging tools can betargetSetting up a new ES version based on your Node version slightly reduces the parsing and conversion time, and the packaging tools will override it with their own Settings without much impact. In addition, according to the Settingstarget, ts will automatically add some correspondinglibConfigurations such as ES6 are addedDOM,ES6,DOM.Iterable,ScriptHost.

Configuration Jest

Create a jest. Config. js file next to package.json and add the following:

module.exports = {
  preset: 'ts-jest'
}
Copy the code

Very brief, yes? Follow-up will increase according to the situation oh!

Configuration ESLint

If your project is configured with ESLint, you need to take a few more steps to avoid it reporting errors. First install the necessary plug-ins:

npm i --save-dev eslint-plugin-jest eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser
Copy the code

Then, make sure.eslintrc.js has the following configuration added:

{
  extends: [
    'plugin:@typescript-eslint/recommended',].plugins: ['@typescript-eslint'.'jest'.'react'].parserOptions: {
    ecmaVersion: 2020.sourceType: 'module'.ecmaFeatures: {
      jsx: true,}},env: {
    browser: true.node: true.es6: true.'jest/globals': true,},settings: {
    react: {
      version: 'detect',,}}}Copy the code

Write a simple test run

Create index.test.ts under SRC:

const foo = (input: boolean) = > input;

describe('First test'.() = > {
  test('can work'.() = > {
    expect(foo(true)).toBeTruthy();
  });
});

Copy the code

On the command line, type NPX jest enter. If the test goes well, you can see the following print:

 PASS  test/index.test.ts
  First test✓ Can work (1 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 0.607s, estimated 3 sCopy the code

Check out the other test series:

  • Does the front end write unit tests? | creators camp
  • React -testing-library quickly tests react component renderings
  • Jest test CSS Module component error how to do?
  • Isolate uncontrollable factors in unit tests with Jest Mock
  • Use react-testing-library to quickly test react component interactions

Post title XXX | creator training camp The campaign is under way…