ホーム > Laravel > Using Jest in Laravel for Vue Testing
Laravel

Using Jest in Laravel for Vue Testing

Thank you for your continued support.
This article contains advertisements that help fund our operations.

Table Of Contents

  1. What is Jest
  2. Environment Setup
  3. How to Test
  4. Conclusion
オススメ本

When using Vue in Laravel for the frontend, I would like to write test code using Jest.

What is Jest

⇨Official Documentation

Jest is a testing framework for JavaScript.

I think using this should solve any issues.

Environment Setup

Install the necessary packages for mix used in Laravel via command.

⇨Reference article on Qiita

npm install --save-dev jest babel-jest @babel/core babel-core@bridge @babel/preset-env vue-jest @vue/test-utils

Create two files in the root directory.

babel.config.js

module.exports = {
  presets: [["@babel/preset-env", { modules: false }]],
  env: {
    test: {
      presets: [["@babel/preset-env", { targets: { node: "current" } }]],
    },
  },
}

jest.config.js

module.exports = {
  transform: {
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
  },
  moduleFileExtensions: ["js", "vue"],
}

Finally, add a line to package.json.

  //"scripts": {
  // Add a line inside the scripts object.
    "test": "NODE_ENV=test jest"
  // }

The setup is now complete.

How to Test

Create a file.

Create a folder called resources/js/tests for easy management.

Inside that folder, create a file named welcome.js.

Now that the preparation is done, let's start writing actual tests. Here, we will only write the most basic template part.

import ExampleComponent from "../components/ExampleComponent"

const { mount } = require("@vue/test-utils")

test("Test for testing", () => {
  const component = mount(ExampleComponent)
  console.log("a")
})

Let's execute this.

npm test

The result has returned. It seems to have succeeded.

mattun@iMac insta-clone % npm test

> @ test /Applications/MAMP/htdocs/insta-clone
> NODE_ENV=test jest

 PASS  resources/js/tests/welcome.test.js
  ✓ Test for testing (25 ms)

  console.log
    Component mounted.

      at VueComponent.mounted (resources/js/components/ExampleComponent.vue:20:1)

  console.log
    a

      at Object.<anonymous> (resources/js/tests/welcome.test.js:7:13)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.627 s, estimated 2 s
Ran all test suites.

Now, it is confirmed that the component has been successfully mounted.

Though it is just a template in the test code, this is the basic way of writing tests.

Conclusion

In this article, I tried writing Vue tests in Laravel using Jest.

It's just scratching the surface, but once the setup is done with this article, you can search for things like "Jest Vue input" without any relation to Laravel.

I still have a lot to learn about testing, so I hope to continually include new discoveries and other code.

Thank you for reading until the end.

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!