Code Transformation
Jest runs the code in your project as JavaScript, but if you use some syntax not supported by Node.js out of the box (such as JSX, types from TypeScript, Vue templates etc.) then you'll need to transform that code into plain JavaScript, similar to what you would do when building for browsers.
Jest supports this via the
transform configuration option..
Jest will cache the result of a transformation and attempt to invalidate that result based on a number of factors, such as the source of the file being transformed and changing configuration.
#デフォルト
Jest ships with one transformer out of the box -
babel-jest. It will automatically load your project's Babel configuration and transform any file matching the following RegEx:
/\.[jt]sx?$/ meaning any
.js,
.jsx,
.ts and
.tsx file. In addition,
babel-jest will inject the Babel plugin necessary for mock hoisting talked about in ES Module mocking.
If you override the
transform configuration option
babel-jest will no longer be active, and you'll need to add it manually if you wish to use Babel.
#Writing custom transformers
You can write you own transformer. The API of a transformer is as follows:
As can be seen, only
process is mandatory to implement, although we highly recommend implementing
getCacheKey as well, so we don't waste resources transpiling the same source file when we can read its previous result from disk. You can use
@jest/create-cache-key-function to help implement it.
Note that ECMAScript module support is indicated by the passed in
supports* options. Specifically
supportsDynamicImport: true means the transformer can return
import() expressions, which is supported by both ESM and CJS. If
supportsStaticESM: true it means top level
import statements are supported and the code will be interpreted as ESM and not CJS. See Node's docs for details on the differences.
#コーディング例
#型チェック付きTypeScript
While
babel-jest by default will transpile TypeScript files, Babel will not verify the types. If you want that you can use
ts-jest.
#Transforming images to their path
Importing images is a way to include them in your browser bundle, but they are not valid JavaScript. One way of handling it in Jest is to replace the imported value with its filename.