docs(contribute): update writing-a-loader.md #3739
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/webpack-docs/webpack-js-org/qrdkdipat |
| @@ -265,22 +266,24 @@ For instance, the `sass-loader` [specifies `node-sass`](https://github.com/webpa | |||
| So you've written a loader, followed the guidelines above, and have it set up to run locally. What's next? Let's go through a simple unit testing example to ensure our loader is working the way we expect. We'll be using the [Jest](https://jestjs.io/) framework to do this. We'll also install `babel-jest` and some presets that will allow us to use the `import` / `export` and `async` / `await`. Let's start by installing and saving these as a `devDependencies`: | |||
|
|
|||
| ``` bash | |||
| npm install --save-dev jest babel-jest babel-preset-env | |||
| npm install --save-dev jest babel-jest @babel/core @babel/preset-env | |||
There was a problem hiding this comment.
Updated according to https://jestjs.io/docs/en/getting-started#using-babel
| @@ -342,6 +345,7 @@ export default (fixture, options = {}) => { | |||
| }); | |||
|
|
|||
| compiler.outputFileSystem = createFsFromVolume(new Volume()); | |||
| compiler.outputFileSystem.join = path.join.bind(path); | |||
There was a problem hiding this comment.
We need this line, I've copied it from https://github.com/webpack/webpack-dev-middleware/blob/094693854d9461b7dfb6cc371a16260e3c02a36b/src/utils/setupOutputFileSystem.js#L30
| @@ -361,13 +365,16 @@ And now, finally, we can write our test and add an npm script to run it: | |||
| __test/loader.test.js__ | |||
|
|
|||
| ```js | |||
| /** | |||
| * @jest-environment node | |||
There was a problem hiding this comment.
jest-environment defaults to jsdom https://jestjs.io/docs/en/configuration#testenvironment-string, which is not we want here.
| import compiler from './compiler.js'; | ||
|
|
||
| test('Inserts name and outputs JavaScript', async () => { | ||
| const stats = await compiler('example.txt'); | ||
| const output = stats.toJson().modules[0].source; | ||
|
|
||
| expect(output).toBe('export default "Hey Alice!\\n"'); | ||
| expect(output).toBe('export default "Hey Alice!\"'); |
There was a problem hiding this comment.
The example.txt should be:
Hey [name]!
Unfortunately, PrismJS would remove the line break, so I just remove the \n here.
|
Looking good, thanks! |
The
Testingpart is kind of outdated and broken. And here's repo I set up in case anyone review it wanna double check https://github.com/chenxsan/testing-loader